Internet Explorer 8 for Developers by Christian Thilmany

Christian [email protected]

blogs.flyover18.com/christhi

Internet Explorer 8Standards Interoperability

Improvements CSS 2.1, HTML 4.01, HTML 5 DOM Storage, etc. Multiple rendering modes support, Acid2 test passes!

New Features Accelerators / Activities WebSlices Visual Search Favorites bar AJAX Improvements Automatic crash recovery Security Features

Platform Enhancements Performance improvements Developer tools

Versioning and IE ModesCompatibility Modes IE8 Standard (default) – CSS 2.1-compliant IE7 Emulation – backward compatibility with IE7 IE5 Compatible – IE5 rendering behavior

Mode Switches (Opt-in) HTTP header: X-UA-Compatible: IE=7

For example, Web.Config in IIS7:<httpProtocol> <customHeaders> <clear /> <add name="X-UA-Compatible" value="IE=7" /> </customHeaders> </httpProtocol>

JavaScript: document.documentMode Meta tag: <meta http-equiv="X-UA-Compatible" content="IE=7">

Demo

Accelerators / ActivitiesContextual Menu Options Based on content selection “look up” & “send to” external services In-place content preview

Implementation OpenService Activity XML descriptor

http://www.microsoft.com/schemas/openservicedescription/1.0

HTTP GET/POST JavaScript integration

window.external.AddService() & IsServiceInstalled()

Sample XML descriptor<?xml version="1.0" encoding="UTF-8"?><os:openServiceDescription xmlns:os="http://www.microsoft.com/schemas/openservicedescription/1.0"> <os:homepageUrl>http://maps.live.com</os:homepageUrl> <os:display> <os:name>Map with Live Maps</os:name> <os:icon> http://www.live.com/favicon.ico</os:icon> </os:display> <os:activity category="map"> <os:activityAction context="selection" > <os:preview action="http://maps.live.com/geotager.aspx?b={selection}&clean=true&w=320&h=240"></

os:preview> <os:execute action="http://maps.live.com/default.aspx"><parameter name=“w1" value="{selection}"

/></os:execute> </os:activityAction> </os:activity></os:openServiceDescription>

OpenService Format

<?xml version="1.0" encoding="utf-8" ?> <os:openServiceDescription

xmlns:os="http://www.microsoft.com/schemas/openservicedescription/1.0"> <os:homepageUrl>http://maps.live.com</os:homepageUrl> <os:display> <os:name>Map with Live Maps</os:name> <os:icon>http://maps.live.com/favicon.ico</os:icon> </os:display> <os:activity category="Map"> <os:activityAction context="selection"> <os:execute method="get“

action="http://maps.live.com/default.aspx?where1={selection}" /> <os:preview method="get" action="http://maps.live.com/geotager.aspx"> <os:parameter name="b" value="{selection}" />

<os:parameter name="clean" value="true" /> <os:parameter name="w" value="320" /> <os:parameter name="h" value="240" /> <os:parameter name="format" value="full" />

</os:preview> </os:activityAction> </os:activity></os:openServiceDescription>

Deploying Accelerators

//check if service is already installed

window.external.IsServiceInstalled(http://maps.live.com/livemaps.xml);

//if false, display button to add service

window.external.AddService(http://maps.live.com/liveMaps.xml) ;

Web SlicesPage Content Subscription RSS-based subscriptions to portions of a Web

page Favorites Bar with update notification Content-hover discovery In-place content preview

Implementation Enabled by adding HTML annotations hAtom Microformat and Web Slice format Refresh interval configurable

Sample HTML Annotations WebSlice at “<url>#1”

<div class="hslice" id="1"> <p class="entry-title">Item - $66.00</p> <div class="entry-content">high bidder:

buyer1 … </div></div>

Web Slice Format

• hAtom Microformat describes a feed & items• Web Slice builds on hAtom

• hAtom can represent static content• Web Slice is dynamic content

• Web Slice reuses properties on hAtom• Adds optional properties for subscribing

• ttl – time-to-live value• feedurl – alternative path to get updates• endtime – When the feed item is no longer relevant

• Can be applied to an hAtom

WebSlices and Feeds

• The Windows Feeds Platform now supports both feeds and Web Slices• Converts Web Slice HTML to Atom feed• Accessible by Feed API• Sanitizes content (no script)

• Feeds Platform adds Authentication Support• HTTP-based Authentication (Basic & Digest)• Basic auth via SSL• Uses saved creds for background download• Cookie Auth preferred approach

Demo

AJAX Enhancements

AJAX Navigation Back/forward stack navigation w/ AJAX apps Treats window.location.hash updates like navigations/saves

document URL Fires hashChanged events Compliant w/ W3C HTML5 working draft

DOM Storage Key/value pair data Each domain has 10MB local storage (default), 100MB total Mitigate network loss scenarios

var storage = window.globalStorage[<url>];//or, var storage = sessionStorage[<url>];storage.begin();storage.setItem("John","Public");storage.setItem(“Jane”, “Public”);storage.commit();var cptname = storage.getItem("John");storage.removeItem("John")

Integrating Ajax with Navigation• Set Window.location.hash, IE does the rest

• IE fires an window.onhashchange event• IE updates the address bar and back button• Allows copy & paste of “Ajax URLs”

AJAX EnhancementsNetworking Network state event notifications

• Online/Offline Methods and Events Handlers Up to 6 concurrent connections per host in broadband

2 still in narrow-band XMLHTTPRequest enhancements

• Added method timeout – Added event handler ontimeout

Cross-Domain Communication Cross-domain Request (XDR)

• XDomainRequest API – new XDomainRequest();• Anonymous requests by default

Cross-document Messaging (XDM) APIs• Communicate across multiple iFrames (from different domains)• Send with window.postMessage() API• Receive with document.onmessage event handler• Compliant w/ W3C HTML5 working draft

The Network isn't Always There• Network connectivity is transient

• HTML5 adds online/offline events• And a state indicator

<!-- Add handlers for online/offline events -->

<body ononline=“go_online()” onoffline=“go_offline()”>;

// Find out if browser is onlineonline = window.navigator.onLine;

Demo

Developer Tools

Built-In Developer Tools Dynamic toggling of rendering modes 3 modes – HTML, CSS, JavaScript

HTML & CSS Explorer Exposes internal representation of DOM tree and CSS styles Real-time editing and rendering Element-based style explorer CSS file-based view in CSS mode

Developer Tools

JavaScript Debugger

Execution control• Source code line and context-based breakpoints• Step into, over, out, continue; break all (pause)

Variable Inspection• Scope sensitive (local, global, etc.)• Set watch variables

Call Stack Manipulation• Dynamic call stack traversal

Custom Script Execution• Immediate tab

Demo

Optimizing for Performance

• Jscript improvements• DOM object look ups are much faster• Circular references are garbage collected• Faster native JavaScript operations

• function call performance (lazy ‘this’ evaluation, lazy GC init)

• string methods (string concat, replace, slice, splice)

• array methods (concat, sort)• read, write, and delete Object methods• garbage collection algorithm• communication layer between DOM and JScript

Predictable Experience for Users

• Security is key• Domain is highlighted in address bar

• Improved Manage Add-On experience

• Improved ActiveX• Per-user ActiveX installs, without admin• Per-site ActiveX controls• DEP/NX code execution prevention

Predictable Experience for Users

• Compatibility is also key• Users’ sites and apps must continue to

work with a new browser version• The browser needs to “just work”

• Reliability• IE8 is resilient to crashes in tabs• We decouple the frame from the tabs• Non-crashing tabs are recovered!

Timeline

Mar 5th, 2008 August, 2008 December, 2008

Beta 1 Beta 2 Release

Platform Support Windows Vista SP1; x64 and x86 Windows XP SP2, SP3 Windows Server 2008 x64 and x86 Windows Server 2003 SP2 x64 and x86

Memory Requirements Windows Vista – 512MB Windows XP – 64MB Windows Server 2008 – 512MB Windows Server 2003 – 64MB x86; 128MB x64

ResourcesInternet Explorer 8 IE8 Home – http://www.microsoft.com/ie8/ IE8 beta 2 download –

http://go.microsoft.com/fwlink/?LinkID=111416

IE8 Activities Guide – http://go.microsoft.com/fwlink/?LinkID=99193

IE8 Readiness Toolkit – http://www.microsoft.com/windows/products/winfamily/ie/ie8/readiness/default.htm

IE8 whitepapers – http://code.msdn.microsoft.com/ie8whitepapers

IE8 VPC (WinXP sp2) – http://go.microsoft.com/fwlink/?LinkID=70868

IE8 new features HOLs – http://code.msdn.microsoft.com/iemix08labs

Defining Document Compatibility – http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx

WebSlice Format Specification – http://msdn.microsoft.com/en-us/library/cc304073(VS.85).aspx

WebSlice Samples eBay – http://ie8.ebay.com Facebook Status Updates –

http://www.facebook.com Taobao – http://ie8.taobao.com Netease – http://ie8.163.com StumbleUpon –

http://www.stumbleupon.com/ie8/ MSN SlideShow –

http://www.msn.com/rss/ie8_slideshow.aspx

Feedback Report Web Page Problem Add-on –

http://go.microsoft.com/fwlink/?LinkId=110518

IE team blog – http://blogs.msdn.com/ie/ IE developer forum –

http://forums.microsoft.com/MSDN/ShowForum.aspx?ForumID=923&SiteID=1

IE8 beta newsgroup – http://go.microsoft.com/fwlink/?LinkId=110585

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

Thank you

[email protected]/christhi