Advanced Cross-Browser Layout with Internet Explorer 8

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

demo

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

MODES

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

Video

Blog post

http://channel9.msdn.com/Showpost.aspx?postid=367207

http://blogs.msdn.com/ie/archive/2007/12/19/internet-explorer-8-and-acid2-a-milestone.aspx

ACID2


demo

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


demo

Compatibility and Innovation

Enable new experiences

Existing sites just work

Enable new experience

s

Existing sites just

work

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

MODES

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

MODES

Mode must be enabled via opt-

in

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

<script type="text/javascript">// What mode is my document in?document.write("My document is in IE" + document.documentMode + " compatibility mode");</script>

META Tag Opt-In

<!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>

Opt-in via <META> tag or HTTP header

Version Targeting DemoScott DickensLead Program ManagerMicrosoft

demo

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


demo

Internet Explorer 8

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.

Date post:	07-Dec-2014
Category:	Technology
Upload:	goodfriday
View:	1,417 times
Download:	2 times

Advanced Cross-Browser Layout with Internet Explorer 8

Technology