Internet Explorer 8:a developers overview

Dave BostDeveloper EvangelistMicrosoft Corporation

http://davebost.com/blog

Web Standards

The best way to get interoperability: Comprehensive unbiased test suites

7201 test cases contributed to W3C

HTML 4.01 CSS 2.1 ACID 2

Test Cases available at http://samples.msdn.microsoft.com/ietestcenter

CSS 2.1 Test Results

IE7

IE8

(Com

pat M

ode)

IE8

(Sta

ndar

ds)

Fire

fox

3.0.

6

Opera

9.6

3

Safa

ri 3.

2.2

Chrom

e 1.

0

Safa

ri 4

65%

70%

75%

80%

85%

90%

95%

100%

% P

ass

ing T

est

s

A New Layout EngineUsers expect their sites to “just work”What do developers want?

IE6 RenderingIE7 RenderingIE8 Rendering

IE7 and IE8 rendering engine built inHow do we give developers what they want?Compatibility Meta Tag or HTTP Header

<meta http-equiv=“X-UA-Compatible” content=“IE=7” />

IE8 Rendering by default

User fix: Compatibility View Button

Exceptions:Compatibility List View sitesIntranet sites

Compatibility View List sites

Site in the list run in IE7 Rendering Mode

Help websites’ transition to IE8Temporary fix, not supported in the future

Based on beta user telemetryInclude TOP websites per country

Easy to opt-out:META tag override Compatibility View listWebsite owner send email to iepo@microsoft.com

Best user experience

Website using META tag

Compatibility META tag

Put you in full control of your website rendering mode

<meta http-equiv=“X-UA-Compatible”

content=“IE=EmulateIE7” />

Compatibility META tag

How to add the meta tag

Page (HTML, PHP, ASPX, …)<meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7” />

Web.config (ASP.Net)<?xml version="1.0" encoding="utf-8"?><configuration> <system.webServer> <httpProtocol> <customHeaders> <clear />

<add name="X-UA-Compatible" value="IE=EmulateIE7"> </customHeaders> </httpProtocol> <system.webServer></configuration>

Custom HTTP Header (IIS, Apache, …)

http://msdn.com/iecompat

Intranet sites

Intranet sites run in IE7 Rending Mode

Easy to opt-outUsing META tag

How to maximize your end-users experience?

Short termInclude the IE=EmulateIE7 META tag

Long termCode to IE8 Standards + Include IE=8 META tag

Performance and MemoryConnection Limits Increased

Broadband: 6Modem: 2Configurable via API’s

Pre-Parser doesn’t block at script tagsJScript Improvements

DOM object look ups are much fasterCircular referenced objects are garbage collectedFaster native Jscript operations

Function call performanceString methodsArray methodsRead, write, and deleted Object methodsGarbage collection algorithmCommunication layer between DOM and JSript

New DOM Features

Mutable DOM PrototypesAdd new methodsAdd new propertiesOverride default built-in behavior for methodsOverride default built-in behavior for properties

Native JSON SupportFaster JSON accessUses JSON2 nomenclature 3rd party code no longer needed

DOM Improvements

hasAttribute(“attrName”) (on Element)Supports “unspecified” attributesCase comparisons for HTML are case-insensitiveGetters/setters behave consistently (return strings)

ownerElement, contentDocument, and moregetElementById() no longer includes ‘name’d elementsDynamic radio buttons and checkboxes now work properlygetAttribute(for/style/class/[boolean]) fixedBoolean attributes properly returnedHTML collections fixedOperation Aborted parsing error relegated to script errorDataURI

New User Experiences

Web Slices: Keep up with what matters most

Accelerators: Get things done faster

Visual Search: Visualize your search

AcceleratorsProvides web services with a simple right click

Maps, Blogs, Email, Productivity, Social Networking

Quickly drive users back to your siteUses Open Service Format

Simple XML fileEasy to deploy to users

window.external.IsServiceInstalled()window.external.AddService()

Accelerator XML File<?xml version="1.0" encoding="utf-8" ?> <openServiceDescription

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

action="http://maps.live.com/default.aspx?where1={selection}" />

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

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

</preview> </activityAction> </activity></openServiceDescription>

<button id="myButton" onclick="window.external.AddService('http://www.example.com/activity.xml')"> Add MyMap to the shortcut menu in Internet Explorer 8</button>

Web Slices

Users monitor lots of content on the web

Auctions, Weather, Top News, Blogs…Web Slices allow users to subscribe to content directly within a web pageRequires a developer to mark up their page with a couple of new CSS classes

Web Slice Code Sample

Developer Productivity

CSS, HTML and Javascript debugger “in the box”

Page “live editing”Execution control (breakpoints, immediate window, step into, …)Layout box model, style tracingProfiler

Developer Tools

Tools ship in the boxDebugging HTML & CSS

View effective styles, Trace styles, View applied rules, View layout, Edit HTML and CSS

Debugging JavaScriptExecution control, Variable Inspection, Immediate Window

Easy rendering engine changingSwitch between layout modes without changing the page source

Developer Tools

JavaScript ProfilerOne click start/stop of profilerQuickly see where application is spending timeFunction or Call Tree View

Save EditsNotepad like editing & inline editingAdd/Change attributes, classes & propertiesMake changes to HTML, CSS, and save to disk

Showing it all off…Web Slices, Accelerators, Visual Search and the Developer Toolbar

demo

SecurityIntegrated anti-phishing protectionSecure development lifecycle (SDL) IEAK, centralized build and update managementExtended validation (ev) ssl certificatesDomain highlightingIntegrated cross site scripting protectionHTTP only cookiesLegacy versions support (10 years)

Inprivate filtering (control of 3P data sharing)24/7 escalation for phishing and malwareP3P supportAnti-spoofing int. Domain names controlCross document messaging (XDM)Centralized add-on managementIntegrated click-jacking prevention

Looking Forward to the Future

HTML 5XDR/XDMJSONCSS selectorsDOM storageMutable DOM prototypesAjax navigationNetwork connection awareness

CSS 3Box-sizingVertical-text

Call To Action

Install IE8 todayVPC’s are available

Test, Test, TestTest Your WebsitesAdd The META Tag As AppropriateTell Us About Our Bugs!

Learn About IE Application Compatibility

http://MSDN.com/IECompat

Resources

blogs.msdn.com/ie – Official IE team blogmsdn.Com/ie – IE developer centermsdn.Com/iecompat – IE compatibility centersessions.visitmix.com – MIX09blogs.msdn.com/Giorgio – Girogio Sardo’s blog

Dave Bost

thank you!

http://davebost.comhttp://twitter.com/davebost

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