2. Matt Heller Internet Explorer Microsoft Corporation WUX301

3. Matt Heller Internet Explorer Microsoft Corporation WUX301

4. Path to Standards Pre-standards Present All content is standards compliant Goal is predictability across browsers

5. A Web Site's Journey

6. Objectives And Takeaways Session Objectives: 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

7. IE6 IE7 Standards

8. IE7 Layout – brief overview Markup Tree Display Tree Layout object Position, dimension, etc. DOCUMENT Bottom up approach Anonymous boxes are a problem

9. IE8 Layout Model Markup Tree Display Tree DOCUMENT LAYOUT CONTENT MODEL Page Layout Component Page Object Display client

10. Investment in Layout Great typographic foundation Designed with CSS 2.1 spec in hand Deprecation of hasLayout New Layout Engine MSHTML

11. Predictability Across Browsers Tenet #1 – Better support for web standards MODESMODES IE 8 CSS 2.1 layout + JavaScript / OM improvements IE8 Layout

12. CSS Compliance Progress Goal = CSS 2.1 compliance Great progress to date: ACID2 displays correctly

13. CSS Compliance Challenges 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 9.3.1 Choosing a positioning scheme: 'position' property The 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 suite Contributed tests to the W3C Areas of ambiguity in spec

14. IE8 Mode in Action

15. Enable new experiences Existing sites just work Enable new experiences Existing sites just work Compatibility and Innovation

16. Existing Sites Just Work Tenet #2 – Allow developers to choose IE7 compatibility mode if they want / need it

17. 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 MODESMODES IE <= 6 Quirks mode IE 7 Standards mode

18. Version Targeting

19. 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 MODESMODES

20. 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 MODESMODES Default = best standards mode

21. 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 MODESMODES Mode must be enabled via opt-in Default = best standards mode

22. META Tag Opt-In Test Page Opt-in via tag or HTTP header

23. Technical Details Declared overrides Compatibility mode switch can “lock-in” Quirks and IE7 Standards modes as well Common NameCompatibility Mode Value QuirksIE=5 IE7 StandardsIE=7 Emulate IE7IE=EmulateIE7 IE8 StandardsIE=8 Emulate IE8IE=EmulateIE8 Always Use Latest Mode IE=edge

24. META Tag Opt-In // What mode is my document in? document.write("My document is in IE" + document.documentMode + " compatibility mode"); Check Document Mode of a Page

25. Version Targeting

26. Cross Browser Solutions Web Application Building Blocks Native JSON XDomainRequest Cross Document Messaging AJAX Navigations

27. Native JSON Compliant with ES3.1 Proposal Use 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.

28. 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

29. Cross Domain Request XdomainRequest Secure solution over XMLHttpRequest Removes same site origin issues Request data from sites with a different hostname Supports Access-Control-Allow-Origin header Standards based, supported across browsers

30. XDR is much safer and easier to use Strips personal data from outgoing requests other server Browser Your site content Your server GET DATA XDR Object 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 text Cross Domain Request (XDR)

31. var xdr = new XDomainRequest(); xdr.open( '' GET '', '' http://www.contoso.com/loc ations.txt '' ); xdr.send( '''' ); xdr.onload = alert( '' GOT: '' + xdr.responseText); It's Easy to Get Data Cross Domain Using XDR

32. Cross Document Messaging Enables two domains to establish a trust relationship to exchange object messages Provides a web developer a more secure mechanism to build cross domain communication Part of the HTML5 specification

33. Allows domains to share data across frames Part of the new HTML 5 draft standard other site other server Browser Your site Your 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)

34. html> 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");} <iframe id=innerIframe1 src="http://contoso.com/gadget.htm" onload="postToIframe()"> Code Sample: XDM Sender

35. document.onmessage = receiver; function receiver() { if (window.event.data == 'Hello') { window.event.source.postMessage('World'); } } Code Sample: XDM Responder

36. AJAX Navigation OnHashChange event Back and Forth Buttons Work Update Travel log

37. AJAX Navigation

38. Call to Action Test site in IE8 If it doesn’t work, modify site or opt in to IE7 Standards Mode As you make changes, remove IE7 opt-in How to modify site: Decide whether or not to specify a mode User-agent sniffing Conditional comment checks

39. Compatibility Challenges User-Agent Sniffing Incorrect: 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

40. Compatibility Challenges Conditional Comments If document is IE8 Standards : Test Page /* pass down-level browsers style fix-ups */ If document is Quirks / IE7 Standards: Test Page /* non-standard content: pass all versions of Internet Explorer fix-ups */ Call to action: update conditional comment blocks

41. Internet Explorer 8 Interoperability Compatibility New scenarios

43. 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/learning Microsoft Certification and Training Resources www.microsoft.com/learning Microsoft Certification & Training Resources Resources

44. Complete an evaluation on CommNet and enter to win!

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