Goal is predictability
                           across browsers




                              All content is
       ...
Session Objective(s):
  Discuss the new layout engine and its
  capabilities
  Explain the strategy for improved standards...
• Great typographic
                  foundation
    New
                • Designed with CSS 2.1
Layout Engine
           ...
Tenet #1 – Better support for web standards


                     MODES
                                    IE 8
        ...
Goal = CSS 2.1 compliance
Great progress to date: ACID2 displays correctly




Additional Resources
        Video
        ...
9.3.1 Choosing a positioning scheme: 'position' property
Path to CSS 2.1 compliancethe normal flow (this is
              ...
Enable new
                  Enable new
            experiences
                  experiences



Existing sites
  just wor...
Tenet #2 – Allow developers to choose IE7
compatibility mode if they want / need it
                                      ...
Multiple layout modes provide support for Quirks,
Standards, and IE8 Standards modes
                             MODES
IE...
Common Name         Compatibility Mode
                                         Declared <META>
                    Value
...
Opt-in via <META> tag or HTTP header
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
quot;http://www.w3.o...
Call to action: update User-Agent string sniffing

User-Agent Sniffing
Incorrect:
if ( ver > -1 )
  {
    if ( ver == 7.0 ...
Call to action: update conditional comment blocks

Conditional Comments
If document is IE8 Standards:
<head>
<title>Test P...
Interoperability

Compatibility

New scenarios
© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
Advanced Cross-Browser Layout with Internet Explorer 8
Advanced Cross-Browser Layout with Internet Explorer 8
Advanced Cross-Browser Layout with Internet Explorer 8
Advanced Cross-Browser Layout with Internet Explorer 8
Advanced Cross-Browser Layout with Internet Explorer 8
Advanced Cross-Browser Layout with Internet Explorer 8
Advanced Cross-Browser Layout with Internet Explorer 8
Advanced Cross-Browser Layout with Internet Explorer 8
Upcoming SlideShare
Loading in …5
×

Advanced Cross-Browser Layout with Internet Explorer 8

1,622 views

Published on

Learn the new layout and how to take advantage of new layout functionality in Microsoft Internet Explorer 8 to create cross-browser-compatible layout designs

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,622
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Advanced Cross-Browser Layout with Internet Explorer 8

  1. 1. Goal is predictability across browsers All content is standards compliant Pre-standards Present
  2. 2. 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
  3. 3. • Great typographic foundation New • Designed with CSS 2.1 Layout Engine spec in hand • Deprecation of hasLayout MSHTML
  4. 4. Tenet #1 – Better support for web standards MODES IE 8 • CSS 2.1 layout + Javascript / OM improvements IE8 Layout
  5. 5. Goal = CSS 2.1 compliance Great progress to date: ACID2 displays correctly Additional Resources Video Blog post
  6. 6. 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
  7. 7. Enable new Enable new experiences experiences Existing sites just work Existing sites just work
  8. 8. 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
  9. 9. 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
  10. 10. 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=quot;text/javascriptquot;> // What mode is my document in? document.write(quot;My document is in IEquot; + document.documentMode + quot; compatibility modequot;); </script>
  11. 11. Opt-in via <META> tag or HTTP header <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html xmlns:web xmlns=quot;http://www.w3.org/1999/xhtmlquot; lang=quot;enquot; xml:lang=quot;enquot; class=quot;liveApp la_en lo_us IE IE_8quot;> <head> <title>Test Page</title> <meta http-equiv=“X-UA-Compatible” content=“IE=8” /> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /> <meta name=quot;descriptionquot; content=quot;Find exactly what you are looking for – FAST!quot; /> <meta name=quot;ROBOTSquot; content=quot;NOODPquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot; ref=quot;stylesheets/standards.cssquot; /> </head>
  12. 12. Call to action: update User-Agent string sniffing User-Agent Sniffing Incorrect: if ( ver > -1 ) { if ( ver == 7.0 ) msg = quot;You're using a recent copy of Internet Explorer.quot; else msg = quot;You should upgrade your copy of Internet Explorer.quot;; } Correct: if ( ver > -1 ) { if ( ver >= 7.0 ) msg = quot;You're using a recent copy of Internet Explorer.quot; else msg = quot;You should upgrade your copy of Internet Explorer.quot;; }
  13. 13. 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 */ <!--[if lte IE 7]> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=“stylesheets/ie.cssquot; /> <![endif]--> </head> If document is Quirks / IE7 Standards: <head> <title>Test Page</title> /* non-standard content: pass all versions of Internet Explorer fix-ups */ <!--[if gte IE 7]> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=“stylesheets/ie.cssquot; /> <![endif]--> </head>
  14. 14. Interoperability Compatibility New scenarios
  15. 15. © 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.

×