Matt Heller Internet Explorer Microsoft Corporation WUX301

Advanced Cross-Browser AJAX Applications with Windows Internet Explorer 8

Matt HellerInternet ExplorerMicrosoft CorporationWUX301

Advanced Cross-Browser WEB Applications with Windows Internet Explorer 8

Matt HellerInternet ExplorerMicrosoft CorporationWUX301

Path to Standards

Pre-standards

Present

All content is standards compliant

Goal is predictability across browsers

A Web Site's Journeydemo

Objectives And Takeaways

Session Objectives: 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

IE6

IE7

Standards

IE7 Layout – brief overview

Markup Tree

Display TreeLayout object

Position, dimension,

etc.

DOCUMENT<html><style>

Bottom up approachAnonymous boxes are a problem

IE8 Layout Model

Markup Tree Display Tree

DOCUMENT<html><style>

LAYO

UT

CON

TEN

T M

ODE

L Page Layout Component

Page Object

Display client

Investment in Layout

• Great typographic foundation

• Designed with CSS 2.1 spec in hand

• Deprecation of hasLayoutNew

Layout Engine

MSHTML

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

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 clearLack of test suite

Contributed tests to the W3CAreas of ambiguity in spec

demoIE8 Mode in Action

Enable new experiences

Existing sites just work

Enable new experiences

Existing sites just work

Compatibility and Innovation

Existing Sites Just WorkTenet #2 – Allow developers to choose IE7 compatibility mode if they want / need it

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 Targetingannouncing

Versioning Architecture



IE 8• CSS 2.1 rendering +


IE7 Layout IE8 Layout

Multiple layout modes provide support for Quirks, Standards, and IE8 Standards modes

MODES








MODES

Default = best standards mode








MODES

Mode must be enabled via opt-

in

Default = best standards mode

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

Technical DetailsDeclared <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

Emulate IE7 IE=EmulateIE7

IE8 Standards IE=8

Emulate IE8 IE=EmulateIE8

Always Use Latest Mode

IE=edge

META Tag Opt-In

<script type="text/javascript">

// What mode is my document in?

document.write("My document is in IE" + document.documentMode + " compatibility mode");

</script>

Check Document Mode of a Page

Version Targeting

demo

Cross Browser SolutionsWeb Application Building Blocks

Native JSONXDomainRequestCross Document MessagingAJAX Navigations

Native JSON

Compliant with ES3.1 ProposalUse ours, Use yours…

Migrate existing code to use native JSON support If the private JSON implementation is based on some of version of json2.js the migration should be very simple.

Opt out of the native JSON support and continue to use the existing private JSON object

Rename (change) all code using the ‘JSON’ to something different (e.g. ‘MyJSON’). Override - ensure the private JSON definition overrides all code. Removing “if(!this.JSON)” condition should do the trick.

var jsObjString = "{\"memberNull\" : null, \"memberNum\" : 3, \"memberStr\" : \"StringJSON\", \"memberBool\" : true , \"memberObj\" : { \"mnum\" : 1, \"mbool\" : false}, \"memberX\" : {}, \"memberArray\" : [33, \"StringTst\",null,{}]";

var jsObjStringParsed = JSON.parse(jsObjString);

var jsObjStringBack = JSON.stringify(jsObjStringParsed);

Working with the JSON API

Cross Domain RequestXdomainRequest

Secure solution over XMLHttpRequestRemoves same site origin issues

Request data from sites with a different hostnameSupports Access-Control-Allow-Origin header

Standards based, supported across browsers

XDR is much safer and easier to useStrips personal data from outgoing requests

other server

Browser

Your site content

Your server

GET DATA

XDRObject

XDR tells the remote server the request’s ORIGIN

Safer: XDR refuses to return data unless server signals that cross-domain access is allowed

Safer: Data is transferred instead of executable code

texttext

Cross Domain Request (XDR)

<script> var xdr = new XDomainRequest();

xdr.open(''GET'',''http://www.contoso.com/locations.txt'');

xdr.send(''''); xdr.onload = alert(''GOT:'' +

xdr.responseText);</script>

It's Easy to Get Data Cross Domain Using XDR

Cross Document Messaging

Enables two domains to establish a trust relationship to exchange object messagesProvides a web developer a more secure mechanism to build cross domain communicationPart of the HTML5 specification

Allows domains to share data across framesPart of the new HTML 5 draft standard

other site

other server

Browser

Your siteYour server

text

Safer: IE blocks the data transfer unless both documents opt-in

Safer: Data is transferred as text instead of executable code

Cross Document Messaging (XDM)

html><head> <script> function receiver() { if (window.event.data == 'World') { alert("success!"); } } function postToIframe() { document.onmessage = receiver; var ff = document.getElementsByTagName('iframe')[0]; ff.contentWindow.postMessage('Hello', "http://contoso.com");} </script></head><body> <iframe id=innerIframe1 src="http://contoso.com/gadget.htm" onload="postToIframe()"></iframe></body></html>

Code Sample: XDM Sender

<html><head> <script> document.onmessage = receiver; function receiver() { if (window.event.data == 'Hello') { window.event.source.postMessage('World'); } } </script></head></html>

Code Sample: XDM Responder

AJAX Navigation

OnHashChange eventBack and Forth Buttons WorkUpdate Travel log

AJAX Navigation

demo

Call to Action

Test site in IE8If it doesn’t work, modify site or opt in to IE7 Standards ModeAs you make changes, remove IE7 opt-in How to modify site:

Decide whether or not to specify a modeUser-agent sniffingConditional comment checks

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

Internet Explorer 8

Interoperability

Compatibility

New scenarios

question & answer

www.microsoft.com/teched

Sessions On-Demand & Community

http://microsoft.com/technet

Resources for IT Professionals

http://microsoft.com/msdn

Resources for Developers

www.microsoft.com/learningMicrosoft Certification and Training Resources

www.microsoft.com/learning

Microsoft Certification & Training Resources

Resources

http://www.microsoft.com/teched

http://microsoft.com/technet

http://microsoft.com/msdn

http://www.microsoft.com/learning

http://www.microsoft.com/learning

Complete an evaluation on CommNet and enter to win!

© 2009 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.

Documents

Matt Heller Internet Explorer Microsoft Corporation WUX301