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 <= 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
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
Default = best standards mode
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
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 */<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href=“stylesheets/ie.css" /><![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="stylesheet" type="text/css" href=“stylesheets/ie.css" /><![endif]--></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
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.
Top Related