32
Photo credit: oskay

IE8 Compatibility Mode [SXSW 2009]

Embed Size (px)

DESCRIPTION

These are the slides from my portion of the WaSP Annual Meeting at SXSW 2009. This will be published as a full video soon.

Citation preview

Page 1: IE8 Compatibility Mode [SXSW 2009]

Photo credit: oskay

Page 2: IE8 Compatibility Mode [SXSW 2009]

Compat Mode Check

Page 3: IE8 Compatibility Mode [SXSW 2009]

http://easy-designs.net

Compat Mode Check

Page 4: IE8 Compatibility Mode [SXSW 2009]

http://easy-designs.net

Compat Mode Check

compat list

Page 5: IE8 Compatibility Mode [SXSW 2009]

http://easy-designs.net

Compat Mode Check

compat list

Page 6: IE8 Compatibility Mode [SXSW 2009]

http://easy-designs.net

Compat Mode Check

compat list

?

Page 7: IE8 Compatibility Mode [SXSW 2009]

http://easy-designs.net

Compat Mode Check

compat list

in IE8 Standards Mode

Page 8: IE8 Compatibility Mode [SXSW 2009]

http://easy-designs.net

Compat Mode Check

compat list

Page 9: IE8 Compatibility Mode [SXSW 2009]

http://easy-designs.net

Compat Mode Check

compat list

http://easy-designs.net

Page 10: IE8 Compatibility Mode [SXSW 2009]

http://easy-designs.net

Compat Mode Check

compat list

in IE7 Standards Mode

Page 11: IE8 Compatibility Mode [SXSW 2009]

http://easy-designs.net

Compat Mode Check

compat list

in IE7 Standards Mode

Page 12: IE8 Compatibility Mode [SXSW 2009]

compat mode triggered on easy-designs.net

Compat Trigger

Page 13: IE8 Compatibility Mode [SXSW 2009]

compat mode triggered on easy-designs.net

Compat Trigger

Page 14: IE8 Compatibility Mode [SXSW 2009]

compat mode triggered on easy-designs.net

Compat Trigger

Triggers compat mode for the individual’s browser

Page 15: IE8 Compatibility Mode [SXSW 2009]

compat mode triggered on easy-designs.net

Compat Trigger

Triggers compat mode for the individual’s browser

And if they opted in to provide usage stats, the browser informs Microsoft

Page 16: IE8 Compatibility Mode [SXSW 2009]

standards mode triggered on easy-designs.net

Compat Trigger

Page 17: IE8 Compatibility Mode [SXSW 2009]

standards mode triggered on easy-designs.net

Compat Trigger

It works in the other direction as well

Page 18: IE8 Compatibility Mode [SXSW 2009]

Other Triggers

1. The user has opted to “Display all websites in Compatibility View”

2. The user has opted to “Display all intranet sites in Compatibility View” and the site in question is onan intranet*

3. The user has opted to “Automatically recover from page layout errors with Compatibility View” and the page in question causes an error that triggers this fallback

*excluding localhost and 127.0.0.1

Page 19: IE8 Compatibility Mode [SXSW 2009]

Compat Threshold

Page 20: IE8 Compatibility Mode [SXSW 2009]

Compat Threshold

Votes for compat mode on easy-designs.net:

100 101102103104105110115

compat list

120125130135???

[email protected]

Page 21: IE8 Compatibility Mode [SXSW 2009]

With Version Targeting

compat list

Page 22: IE8 Compatibility Mode [SXSW 2009]

With Version Targeting

compat listweb page

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Page 23: IE8 Compatibility Mode [SXSW 2009]

With Version Targeting

compat listweb page

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Page 24: IE8 Compatibility Mode [SXSW 2009]

With Version Targeting

compat listweb page

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Page 25: IE8 Compatibility Mode [SXSW 2009]

With Version Targeting

Page 26: IE8 Compatibility Mode [SXSW 2009]

With Version Targeting

web page

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

Page 27: IE8 Compatibility Mode [SXSW 2009]

Developer Toggle

Page 28: IE8 Compatibility Mode [SXSW 2009]

Developer Toggle

Page 29: IE8 Compatibility Mode [SXSW 2009]

Does Microsoft want to have their cake

and eat it to?

Page 30: IE8 Compatibility Mode [SXSW 2009]

How I see it

Page 31: IE8 Compatibility Mode [SXSW 2009]

If you want...word-spacing in ems ... to bid farewell to hasLayout ...

object to work like it should ... display: run-in; ...

border-collapse and border-spacing ... inherit to

work properly ... white-space: pre-wrap; ... legend to

be stylable and wrappable ... generated content ... :lang()

selectors ... attr() in generated content ... CSS

counters ... support for quotes ... page break control in CSS

for print ... outline control ... support for data: URIs ...

cross-domain requests ...

el.getAttributeNode('style') ...

el.setAttribute('style','color: #f00;') ...

document.getElementsByName('foo') ...

Page 32: IE8 Compatibility Mode [SXSW 2009]

... you’ll need to be inIE8 Standards Mode