Advanced Cross-Browser Layout with Internet Explorer 8

transcript

Advanced Cross-Browser Layout with Internet Explorer 8Scott DickensLead Program ManagerMicrosoft Corporation

Path to Standards

Pre-standardsAll content is standards

compliant

Goal is predictability across browsers

A Web Site's Journey

Scott DickensLead Program ManagerMicrosoft

Objectives And Takeaways

Session Objective(s): Discuss the new layout engine and its capabilitiesExplain the strategy for improved standards compliance in IE8 layoutIntroduce version targeting and how it may be used to maintain site compatibility

Key Takeaway – Understand how Internet Explorer 8 is delivering improved standards compliance and what this means for your web site now and in the future

Investment in Layout

• Great typographic foundation

• Designed with CSS 2.1 spec in hand

• Deprecation of hasLayout

New Layout Engine

Predictability Across BrowsersTenet #1 – Better support for web standards

IE 8• CSS 2.1 layout +

Javascript / OM improvements

IE8 Layout

CSS Compliance ProgressGoal = CSS 2.1 complianceGreat progress to date: ACID2 displays

correctly

Additional Resources

Blog post

CSS Compliance Challenges

Driving principle = InteroperabilityFollow the spec to the letterFor areas of ambiguity, seek clarification from the working group

Compare browsers and propose common groundPropose solution that is in line with the intent of the spec

9.3.1 Choosing a positioning scheme: 'position' propertyThe box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

Path to CSS 2.1 compliance not crystal clear

Lack of test suiteContributing tests to the W3C

Areas of ambiguity in spec

IE8 Mode In Action

Compatibility and Innovation

Enable new experiences

Existing sites just work

Enable new experience

Existing sites just

Existing Sites Just Work

IE7 Layout*

*Security fixes made to IE7 layout code path may cause changes in behavior from IE7 to IE8

Tenet #2 – Allow developers to choose IE7 compatibility mode if they want / need it

IE <= 6• Quirks mode

IE 7• Standards mode

Version Targeting

announcing

Versioning Architecture

IE <= 6•Quirks mode

IE 7•Standards mode

IE 8•CSS 2.1 rendering + Javascript / OM improvements

IE7 Layout IE8 Layout

Multiple layout modes provide support for Quirks, Standards, and IE8 Standards modes

Mode must be enabled via opt-

Default = best standards mode

Technical Details

Declared <META> overrides <!DOCTYPE>Compatibility mode switch can “lock-in” Quirks and IE7 Standards modes as well

Common Name Compatibility Mode Value

Quirks IE=5

IE7 Standards IE=7

IE8 Standards IE=8

Always Use Latest Mode

IE=edge

META Tag Opt-In

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<title>Test Page</title><meta http-equiv=“X-UA-Compatible” content=“IE=8” /><meta http-equiv="Content-Type" content="text/html;

charset=utf-8" /><meta name="description" content="Find exactly what you are looking for – FAST!" /> <meta name="ROBOTS" content="NOODP" /> <link rel="stylesheet" type="text/css"

ref="stylesheets/standards.css" /></head>

Opt-in via <META> tag or HTTP header

Version Targeting DemoScott DickensLead Program ManagerMicrosoft

Compatibility Challenges

User-Agent SniffingIncorrect:if ( ver > -1 ) { if ( ver == 7.0 ) msg = "You're using a recent copy of Internet Explorer." else msg = "You should upgrade your copy of Internet Explorer."; }

Correct:if ( ver > -1 ) { if ( ver >= 7.0 ) msg = "You're using a recent copy of Internet Explorer." else msg = "You should upgrade your copy of Internet Explorer."; }

Call to action: update User-Agent string sniffing

Compatibility Challenges

Conditional CommentsIf document is IE8 Standards:<head><title>Test Page</title>/* pass down-level browsers style fix-ups */</head>

If document is Quirks / IE7 Standards:<head><title>Test Page</title>/* non-standard content: pass all versions of Internet Explorer fix-ups */</head>

Call to action: update conditional comment blocks

Site Compatibility

Internet Explorer 8

Interoperability

Compatibility

New scenarios

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after

the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Advanced Cross-Browser Layout with Internet Explorer 8

Technology