m artin beeby @ thebeebs @ ubelly ie the story so far martin.beeby@microsoft

Martin Beeby

@thebeebs @ubelly

IE the story so far

martin.beeby@microsoft.com

follow me@thebeebs

people like to shout at me

Why do we build a browser?• The browser is the most used

application on a PC• We want to make sure we deliver the

best experience to Windows users• Have our previous browsers delivered

the best experience?

video:http://bit.ly/puyBN9

•We didn’t listen enough to other opinions

•We locked ourselves away

we all make mistakes

thank you

ie6countdown.com

Our Browser is released in 3 channels• The released browser• Platform Previews• http://html5labs.com

The released browser• Stable implementations of standards

ready for mass consumption.• No implementation is better than a

bad one

Platform Previews• No chrome just the browser• Shipped every 8-12 weeks

Html5labs.com• Early Prototypes• Not guaranteed to be in our final

browser• A place to play with volatile standards– IndexedDB–WebSockets - WebSockets IETF 09

Protocol Spec as of the 22nd of June.– FileAPI–Media Capture API

W3C HTML Working Group

Chair– Sam Ruby (IBM)– Paul Cotton (Microsoft)– Maciej Stachowiak (Apple)40 Member Organizations, 411 Participants, 280 Invited Experts– 16 people from Microsoft

teams

9 Publications• HTML5• HTML Canvas 2D

Context• HTML: The Markup• HTML5 diffs from

HTML4• Polyglot MarkupRecommendations produced under Royalty-Free basis

First Published Working Draft Working

DraftCandidate

RecommendationLast Call

Recommendation

First Published Working Draft Working

DraftCandidate

RecommendationLast Call

Recommendation

CSS

WRI

TING

MOD

ESCS

S LI

NE G

RID

CSS

SCOP

ING

FILE

API

SELE

CTOR

S AP

I L2

UNIF

ORM

MES

SAGI

NG P

OLIC

YW

EB D

OM C

ORE

CSS

SNAP

SHOT

200

7

CSS

RUBY

CSS

BACK

GROU

NDS

& BO

RDER

S

SERV

ER-S

ENT

EVEN

TS

WEB

STO

RAGE

WEB

WOR

KERS

HTM

L5CA

NVAS

2D

CONT

EXT

MICR

ODAT

AHT

ML

+ R

DFA

HTM

L5 M

ARKU

PHT

ML5

DIF

F FR

OM H

TML4

POLY

GLOT

MAR

KUP

TEXT

ALT

ERNA

TIVE

S

CSS

VALU

ES &

UNI

TSCS

S CA

SCAD

ING

& IN

HERI

TANC

ECS

S TE

XT

CSS

GENE

RATE

D CO

NTEN

T FO

R PA

GED

MED

IA

CSS

FONT

SCS

S BA

SIC

BOX

MOD

EL

CSS

TEM

PLAT

E LA

YOUT

CSS

SPEE

CH

CSS

BASI

C US

ER IN

TERF

ACE

CSS

GRID

POS

ITIO

NING

CSS

FLEX

IBLE

BOX

LAY

OUT

CSS

IMAG

E VA

LUES

CSS

2D T

RANS

FORM

ATIO

NSCS

S 3D

TRA

NSFO

RMAT

OINS

CSS

TRAN

SITI

ONS

CSS

ANIM

ATIO

NS

CORS

INDE

XED

DBPR

OGRA

MM

ABLE

HTT

P CA

CHIN

G &

SERV

ING

PROG

RESS

EVE

NTS

WEB

SQL

DAT

ABAS

DEW

EB ID

LW

EB S

OCKE

TS A

PI

XMLH

TTPR

EQUE

ST L

2

CSS

NAM

ESPA

CES

CSS

MUL

TI-C

OLUM

N LA

YOUT

CSS

MED

IA Q

UERI

ES

SELE

CTOR

S AP

I

XMLH

TTPR

EQUE

ST

DOCU

MEN

T ST

RUCT

URE

BASI

C SH

APES

PATH

STE

X T TRAN

SFOR

MS

PAIN

TING

, FIL

LING

, COL

ORSC

RIPT

ING

STYL

ING

GRAD

IENT

SSM

ILFO

NTS

FILT

ER S

CSS

PAGE

D M

EDIA

CSS

PRIN

T PR

OFIL

E

CSS

COLO

R

ELEM

ENT

TRAV

ERSA

L

DOM

L1

DOM

L2

CORE

DOM

L2

VIEW

SDO

M L

2 EV

ENTS

DOM

L2

STYL

EDO

M L

2 TR

AVER

SAL

AND

RANG

EDO

M L

2 HT

ML

DOM

L3

CORE

DOM

L3

EVEN

TSDO

M L

3 LO

AD &

SAV

EDO

M L

3 VA

LIDA

TION

DOM

L3

XPAT

HDO

M L

3 VI

EWS

& FO

MUT

ING

DOM

L3

ABST

RACT

SCH

EMAS

ECM

ASCR

IPT

5

HTML CSS Web Apps SVG

Geol

ocat

ion

GEO-

LOCA

TION

ECM

A

Last Update: 13th June 2011

Site Ready HTML5

Microsofts Approach with HTML5

Under Development

FeaturesEmerging Standards

beautyoftheweb.com

ietestdrive.com html5labs.com

IE9 IE Platform Previews

HTML5 Labs

HTML5 in IE9HTML5

• New Markup Elements• Canvas• Audio• Video• Local Storage• Cross-Window Messaging• Text Selection APIs• Parsing SVG in HTML

CSS3

• 2D Transforms• Border Radius• Box-Shadow• Fonts (WOFF)• Media Queries• Multiple

Backgrounds• Namespaces• Opacity• rgba(), hsl(),

hsla()• Selectors (IE8)

SVG

• Shapes• Clipping, Masking, and

Compositing• Transforms• Extensibility• Gradients• Interactivity• Linking and Views• Painting and Colors• Paths• Text

Others

• ECMA Script 5 (all but Strict Mode)

• Native JSON support (IE8)

• Performance API• Geo-Location• Data-uri (IE8)• DOM L2, L3• Selectors API L2 • AJAX Navigation

(IE8)• DOMParser and

XMLSerializer• ICC v2 and Color

Profile• ARIA

http://bit.ly/IE9Guide

Hardware Acceleration

Platform Preview 1 – Mar 2010• CSS3- Border-Radius, Selectors,

Colour• SVG- Hardware Accelerated.• Commitment to update every 8

weeks• Acid 3 Score 55/100

http://bit.ly/platformpreview1

Platform Preview 2 – May 2010• CSS3 Media Queries• Hardware Accelerated HTML5• Acid Score 68/100

http://bit.ly/platformpreview2

Platform Preview 3 – June 2010• Canvas, Video, Audio• WOFF• ACID3 83/100

http://bit.ly/platformpreview3

Platform Preview 4 – Aug 2010• Audio, Video, Text and graphics now

Hardware Accelerated• 95/100 Acid 3 Score-– The failing 5 tests test two technologies:• SVG Fonts and • SMIL animation of SVG

http://bit.ly/platformpreview4

PP5 - IE9 Beta– Sep 2010• Interface• Site Pinning• Tabs

Platform Preview 6 – Nov 2010• CSS3 2d transforms• HTML5 Semantic Tags

http://bit.ly/platformpreview6

Platform Preview 7 – Nov 2010• JavaScript Performance

http://bit.ly/platformpreview7

IE9 Release Candidate– Feb 2011• GeoLocation• Tracking Protection• UI Improvements like tabs

http://bit.ly/platformpreview8

IE9 Release – March 2011• Faster JavaScript• Addressed 17,000 externally reported

bugs

http://www.beautyoftheweb.co.uk

http://www.beautyoftheweb.co.uk

http://getie9.com

I know what you’re thinking

microsoft have a standards based browser?

yeah right!

next you’ll be telling me they bought skype

Similarities not our differences

sundarksom http://crazymultimedia.blogspot.com/

@charliejennings

-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);

-ms-transform: rotate(-10deg);-o-transform: rotate(-10deg);

The future• IE10 release every 8-12 weeks• Expect us to use the power of the

machine more and more

IE10 - Platform Preview 1 – April 2011• CSS3 multi-column layout• CSS3 grid layout• CSS3 flexible box layout• CSS3 gradients• ES5 strict mode.

http://bit.ly/platformpreview7

IE10 - Platform Preview 1 – April 2011• CSS3 multi-column layout• CSS3 grid layout• CSS3 flexible box layout• CSS3 gradients• ES5 strict mode.

http://bit.ly/platformpreview7

IE10 - Platform Preview 2 – June 2011• CSS3 Floats, • HTML5 Drag-drop, • File reader API, • Media Query Listeners • Initial support for HTML5 Forms. • Web Workers with Channel Messaging, Async

script support, and others. • HTML5 Sandbox and iframe isolation. • setImmediate, requestAnimationFrame, and

PageVisibility • HTML5 Parsing Promise

If IE<!--[if IE 6]> <p>You are using Internet Explorer 6: Seriously? It’s 2011</p> <![endif]-->

<!--[if IE]> <p>This is the number 1 issue we get with IE9… Feeding hacked CSS to IE9</p> <![endif]-->

http://ie.microsoft.com/testdrive/

How can you help?• Try IE9 and IE10• Feedback bugs• Talk to me about joining my IE Council

thankyou

p.s. follow me@thebeebs

and visit us at the ubelly stand…

you can shout at me if you like