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
Advanced Cross-Browser Layout with Internet Explorer 8
1.
2. Goal is predictability
across browsers
All content is
standards
compliant
Pre-standards
Present
3.
4. 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
5. • Great typographic
foundation
New
• Designed with CSS 2.1
Layout Engine
spec in hand
• Deprecation of hasLayout
MSHTML
6. Tenet #1 – Better support for web standards
MODES
IE 8
• CSS 2.1 layout +
Javascript / OM
improvements
IE8 Layout
7. Goal = CSS 2.1 compliance
Great progress to date: ACID2 displays correctly
Additional Resources
Video
Blog post
8.
9. 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
10.
11. Enable new
Enable new
experiences
experiences
Existing sites
just work Existing sites
just work
12. 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
13.
14. 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
15. 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>
16. 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>
17.
18. 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;;
}
19. 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>