Advanced Cross-Browser Layout with Internet Explorer 8

Goal is predictability across browsers All content is standards compliant Pre-standards Present

Session Objective(s): Discuss the new layout engine and its capabilities Explain the strategy for improved standards compliance in IE8 layout Introduce 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

• Great typographic foundation New • Designed with CSS 2.1 Layout Engine spec in hand • Deprecation of hasLayout MSHTML

Tenet #1 – Better support for web standards MODES IE 8 • CSS 2.1 layout + Javascript / OM improvements IE8 Layout

Goal = CSS 2.1 compliance Great progress to date: ACID2 displays correctly Additional Resources Video Blog post

9.3.1 Choosing a positioning scheme: 'position' property Path to CSS 2.1 compliancethe normal flow (this is not crystal The box's position is calculated according to clear position in normal flow). Then the box is offset relative to its called the normal position. When a box B is relatively positioned, the position of the followingof test suite though B were not offset. The effect Lack box is calculated as of 'position:relative' on table-row-group, table-header-group, table- Contributing tests to the W3C footer-group, table-row, table-column-group, table-column, table-cell, and Areas of elements is undefined. table-caption ambiguity in spec Driving principle = Interoperability Follow the spec to the letter For areas of ambiguity, seek clarification from the working group Compare browsers and propose common ground Propose solution that is in line with the intent of the spec

Enable new Enable new experiences experiences Existing sites just work Existing sites just work

Tenet #2 – Allow developers to choose IE7 compatibility mode if they want / need it MODES IE <= 6 IE 7 • Quirks mode • Standards mode IE7 Layout* *Security fixes made to IE7 layout code path may cause changes in behavior from IE7 to IE8

Multiple layout modes provide support for Quirks, Standards, and IE8 Standards modes MODES IE <= 6 IE 7 IE 8 • Quirks mode • Standards mode • CSS 2.1 rendering + Javascript / OM Mode must be improvements enabled via opt-in IE7 Layout IE8 Layout Default = best standards mode

Common Name Compatibility Mode Declared <META> Value overrides Quirks IE=5 <!DOCTYPE> IE7 Standards IE=7 Compatibility mode switch can “lock-in” IE8 Standards IE=8 Quirks and IE7 Always Use Latest IE=edge Standards modes as Mode well <script type=\"text/javascript\"> // What mode is my document in? document.write(\"My document is in IE\" + document.documentMode + \" compatibility mode\"); </script>

Opt-in via <META> tag or HTTP header <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> <html xmlns:web xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"en\" xml:lang=\"en\" class=\"liveApp la_en lo_us IE IE_8\"> <head> <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>

Call to action: update User-Agent string sniffing User-Agent Sniffing Incorrect: 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 conditional comment blocks Conditional Comments If 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>

Interoperability Compatibility New scenarios

© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. 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

0 comments

Notes on slide 1

Favorites, Groups & Events