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=quot;text/javascriptquot;>
// What mode is my document in?
document.write(quot;My document is in IEquot; +
document.documentMode + quot; compatibility modequot;);
</script>

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>

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;;
}

Call to action: update conditional comment blocks

Conditional Comments
If document is IE8 Standards:
<head>
/* pass down-level browsers style fix-ups */

</head>

If document is Quirks / IE7 Standards:
<head>
/* 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

Advanced Cross-Browser Layout with Internet Explorer 8

Recommended

Recommended

More Related Content

Similar to Advanced Cross-Browser Layout with Internet Explorer 8

Similar to Advanced Cross-Browser Layout with Internet Explorer 8 (20)

More from goodfriday

More from goodfriday (20)

Recently uploaded

Recently uploaded (20)

Advanced Cross-Browser Layout with Internet Explorer 8