What You Need To Know About IE8 and Standards

Aaron Gustafson

What you need to know about IE8 and Standards

WHAT YOU NEED TO KNOW ABOUT IE8 AND STANDARDS

WEBVISIONS - 23 MAY 2008

First, a little history...

2



1996

3

IE3 becomes the first browser to support CSS



1997

4

IE4 adds support for DHTML(gentlemen, start your pop-ups)



1998

5

IE5 for Windowsimproves CSS support



1998

6

but gets the box model wrong



2000

7

IE5 for Mac introduces the DOCTYPE switch



2000

8

and the most accurate CSS engine to date



2000

9

IE5.5 for Windows adds even yet still more CSS support



2000

10

but still has the box model wrong



2001

11

IE6 adds more CSS support & the DOCTYPE switch



2003

12

IE6 begins to gather dust



2004

13

IE6 is rolled into a corner, where it begins to smell



2005

14

It appears IE6will never die; enter * html



2006

15

IE7 materializes with much better standards support



2006

16

and breaks a bunch of sites



2008

17

IE8B1 debuts a completely new rendering engine

microsoft.com/windows/products/winfamily/ie/ie8/

http://www.microsoft.com/windows/




2008

18

with a focus on being standards-compliant

microsoft.com/windows/products/winfamily/ie/ie8/





So here we are

19



What’s been fixed?

20



hasLayout is history!!!

21

! IE8 has a completely new rendering engine built from the ground up with CSS2.1 as its guiding principle.

! the old layout strategy was responsible for numerous bugs:

! content disappearing (and reappearing)

! content only half-rendering

! floats or positioning causing odd stu" to happen

! and much more...

! for more on hasLayout:http://msdn.microsoft.com/en-us/library/bb250481.aspx

http://msdn.microsoft.com/en-us/library/bb250481.aspx

http://msdn.microsoft.com/en-us/library/bb250481.aspx



object fallbacks work now<object data="/img/test.tif" type="image/tiff">

<object data="/img/test.png" type="image/png">

<object data="/img/test.jpg" type="image/jpeg">

<p>A photo of my cat.</p>

</object>

</object>

</object>

22



<object data="/img/test.tif" type="image/tiff">




</object>

</object>

</object>

object fallbacks work now

22

test.tif







</object>

</object>

</object>


22

test.png







</object>

</object>

</object>


22

test.jpg







</object>

</object>

</object>


22

A photo of my cat.



:hover, :focus & :active*button {

background: #ccc;

border: 1px solid #333;

color: #333;

}

button:hover {

background: #999;

}

23

my button

* IE8b1 does not support this, but it is planned for the final release



:hover, :focus & :active*button {

background: #ccc;


color: #333;

}

button:hover {

background: #999;

}

23

my buttonmy button




:hover, :focus & :active*input:focus {

background: #fcfab0;

}

button:focus {

background: #999;

}

24

Email

Password

log in






}

button:focus {

background: #999;

}

24

Email

Password

log inlog in

[email protected]

****************






}

input:active {

background: #f00;

}

25

Email

Password

log in






}

input:active {

background: #f00;

}

25

Email

Password

log in




list-style-type completedSupport for more values:

26

ol {

list-style-type: decimal-leading-zero;

}




26

ol {

list-style-type: lower-greek;

}




26

ol {

list-style-type: lower-roman;

}




26

ol {

list-style-type: upper-roman;

}




26

ol {

list-style-type: armenian;

}




26

ol {

list-style-type: georgian;

}



Fixed the bug where background positioning set in emsfailed to use the font size of the element it was applied toas the baseline against which to calculate the distance

background-position fixed

27

p {

background: url(img.jpg) 10em 0 repeat-y;

font-size: 2em;

}

Spec:

IE7-:



Support for additional values:

<p>This is the test paragraph.

It has all kinds of odd tabs and spacing in the

HTML source code.</p>

white-space completed

28

p {

background: #999;

white-space: pre;

width: 100px;

}








28

p {

background: #999;

white-space: pre-wrap;

width: 100px;

}








28

p {

background: #999;

white-space: pre-line;

width: 100px;

}



Corrected the error where if an element did not “have layout”, font-size used to compute the value of word-spacing is not the one specified on the box itself (as it shoud

be), but the one on the parent

word-spacing with ems*

29

p {

word-spacing: 1em;

font-size: 2em;

}

Spec:

IE7-:




! Various border-collapse fixes

! Added support for border-spacing:

Table styles

30

table {


border-spacing: 10px;

}

td {


padding: 10px;

}



! Added support for border-style: hidden:

Table styles

31

table {


border-collapse: collapse;

}

td {


padding: 10px;

}

tr + tr td + td + td {

border-style: hidden;

}



! Added support for caption-side:

Table styles

32

table {


border-collapse: collapse;

caption-side: bottom;

}

td {


padding: 10px;

}

caption {

font-size: .6em;

line-height: 2em;

}



! Added support for empty-cells*

Table styles

33

table {


border-spacing: 10px;

empty-cells: show;

}

td {


padding: 10px;

}




Positioning o"sets*

34


Corrected the recalculation errors when using ems to o"set an absolutely-positioned element:

p a {

position: absolute;

left: -999em;

}

p a:hover {

left: 0;

}



Positioning o"sets*

34


Corrected the recalculation errors when using ems to o"set an absolutely-positioned element:

p a {

position: absolute;

left: -999em;

}

p a:hover {

left: 0;

}



! table, inline-table, table-row, table-row-group, table-column, table-column-group, table-cell, table-caption

! run-in:

Complete display support*

35


p {

display: run-in;

}

p + p {

display: block;

}



IE’s support for z-index incorrectly established a positioning context even in the presence of the “auto” value.

Mended z-index

36

div {

background: #cf9;


position: relative;

}

div p {

background: #9cf;


position: absolute;

right: 2em;

width: 10em;

height: 10em;

z-index: 1;

}

p + div p {

right: 8em;

height: 8em;

z-index: auto;

}

Example adapted from http://aplus.co.yu/lab/z-pos/

http://aplus.co.yu/lab/z-pos/




IE wouldn’t inherit a value for a non-inheritable property, even in the presence of the “inherit” keyword

Fixed inheritance

37

div {

background: #cf9;


position: relative;

}

div p {

border: inherit;

}

Spec:

IE7-:



<form name="foo">First</form>

<div id="foo">Second</div>

Get what you ask for

38

Running

var el = document.getElementById( 'foo' );

el.style.display = 'none';

Used to result in the form being hidden instead of the div.



<div id="foo" style="border: 1px solid">Text here.</div>

style is available via DOM...

39

Running


alert( el.attributes['style'].value );

alert( el.getAttributeNode('style').value );

Both used to return null, now they return

BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT:

1px solid; BORDER-BOTTOM: 1px solid

Note 1: CSS shorthand is expanded and properties are ALL CAPS.

Note 2: the attributes array doesn’t have a length in IE8b1.



<div id="foo" style="border: 1px solid">Text here.</div>

...almost*

40

Running


alert( el.hasAttribute('style') );

Returns false when it obviously shouldn’t.

* This has been submitted as a bug.



Running


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

Setting style works too

41

Just remember that it overwrites the whole attribute.

Note: IE does not support setting event handlers this way:

el.setAttribute( 'onclick', 'alert(\'hello\')' );

But that’s not a huge loss as there are better ways to write event handlers.



<input type="text" name="foo" value="text" />

Find by name now

42

Running

var el = document.getElementsByName( 'foo' )[0];

el.style.border = '1px solid #f00';

Note: IE’s implementation currently ignores custom elements.



Alright, so what’s new?

43



The element can now be positioned

legend is styleable!!!

44

fieldset {

position: relative;

padding: 0 0 0 120px;

}

legend {

font-weight: bold;

width: 100px;

text-align: right;

position: absolute;

top: 0;

left: 0;

}



And it can wrap!!!

legend is styleable!!!

45

legend {

width: 100px;

}



Take the following example:

<dl class="conversation">

<dt>Whiny dude</dt>

<dd>Here's your hamburger. Anyway, as I was saying about how

bad my life is…</dd>

<dt>Other dude</dt>

<dd>Yum, burger. <abbr lang="lol" title="Ok, thank you,

goodbye">kthxbye</abbr>. *leaves*</dd>

<dt>Whiny dude</dt>

<dd>I have no friends.</dd>

</dl>

:lang is supported

46

Example adapted from http://www.urbandictionary.com/define.php?term=kthxbye





:lang is supported

46

Apply a little CSS:

:lang(lol) {

font-style: italic;

}

Example adapted from http://www.urbandictionary.com/define.php?term=kthxbye

And end up with





That’s right. In fact, we just used some:

<dl class="conversation">

<dt>Whiny dude</dt>

<dd>Here's your hamburger. Anyway, as I was saying about how

bad my life is…</dd>

...

Generated content, baby!

47

.conversation dt:after {

content: ': ';

}



You can also do images*:

#content p:first-child:after {

content: url(fancy-break.png);

display: block;

margin-top: .5em;

text-align: center;

width: auto;

}

Generated content, baby!

48




Can be fun to use with your generated content:

Support for attr()

49

abbr[title]:after {

content: " (" attr(title) ")";

}

Could also be useful in debugging:

[id]:hover:after {

color: #f00;

content: " [id=" attr(id) "]";

}



Using counters, you can do all sorts of interesting stu".

body {

counter-reset: section;

}

h1:before {

content: counter(section) " ";

counter-increment: section;

}

h2:before {

content: counter(section) "." counter(subsection) " ";

counter-increment: subsection;

}

h1 + h2 {

counter-reset: subsection;

}

h3:before {

content: counter(section) "." counter(subsection) #

"." counter(subsubsection) " ";

counter-increment: subsubsection;

}

h2 + h3 {

counter-reset: subsubsection;

}

CSS can count now*

50




The quotes property provides access to which quotes are generated into the document.

You can control quotes*

51


<p>Douglas Adams famously said <q>Flying is learning how to

throw yourself at the ground and miss.</q></p>

Applying some styles:

:lang(en) {

quotes: "\201C" "\201D" "\2018" "\2019";

}



! With widows and orphans:

@media print {

p {

widows: 3; /* at least 3 lines @ top of page */

orphans: 3; /* at least 3 lines @ bottom of page */

}

}

! With page-break-inside:

@media print {

pre {

page-break-inside: avoid;

}

}

Control page breaks*

52




Outlines are like borders except they take up no space.

Control outlining

53

input:focus {

outline: 1px dotted #f00;

}

Could also be written as

input:focus {

outline-color: #f00;

outline-style: dotted;

outline-width: 1px;

}



A little CSS3 action lets you choose between the content (W3C) or border (IE) box model.

Choose your box model

54

div {

background: #c63;

border: 10px solid #f00;

margin: 10px;

padding: 20px;

width: 300px;

}

div.border-box {

-ms-box-sizing: border-box;

}



IE8 introduces a proprietary new event called hashchange that can be used to key into changes to the hash portion (fragment) of a URL

Could be very useful for tracking changes in Ajax widgets.

Track page updates

55

window.onhashchange = function(){

alert( window.location.hash );

}

(use your own event listener adding script here)



A means of including small data items inline as though they were an external source.

Support for data: URIs

56

So, instead of writing

#nav a {

background: url(arrow.png) center right no-repeat;

}

you could write

#nav a {

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACN #

iR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALFJREFUeNpi/P//PwM1ARMD #

lQELjBEWFkay5lWrVtHehegG5gBxNRBzUstAHiBuAeKrQBxIzUhRBOJ1QHwAiA2oGcv2QHwGiKcBsRC1 #

kg0zEGcC8T0gLoLyqZIO+YG4F4gvAbEHNRM2G7Vc+BGIi4FYG4h3EMwpBMBcIC4D4ndEZz0c4CAQFwDx #

BUqTzSMgjgBiB1IMwbCL0BcA8R9QPydotIGCqYMuvKQcdCX2AABBgADYx7aDLgnbAAAAABJRU5ErkJgg #

g==) center right no-repeat;

}




56

Pros:

! no additional HTTP tra$c

! frees up a browser’s limited number of download connections for other content

! page requires fewer cache entries

! can be used to embed content when it is not allowed or impractical to reference external files

! reduces the overhead of HTTPS requests

! possible to manage a multimedia page as a single file




56

Cons:

! maintenance nightmare

! page does not benefit from the browser's cache when assets are re-used

! some browsers limit URI lengths

! data is included as a simple stream and many browsers may not support using containers to provide greater complexity such as metadata, data compression, or content negotiation

! encoded data could be 33-200% larger than the binary file



Will IE8 break sites?

57



Only if you let it ;-)

58



! The DOCTYPE switch was a great idea for the time

! only standardistas were validating, so it made sense

! it was an easy way to keep old content from breaking while simultaneously allowing standards-support to increase

! Content tools kinda ruined its usefulness

! in their e"orts to support standards, Dreamweaver, et al began adding DOCTYPEs by default

! users didn’t opt into the DOCTYPE switch’s contract

Issue #1: DOCTYPE % contract

59



! When the IE team stopped improving on IE’s standards support in 2001 (after the launch of IE6), many developers

! didn’t know better and began using it as the standard against which they built websites,

! assumed its rendering to be accurate,

! weren’t aware of how to best manage its “idiosyncrasies” vis a vis the browsers that conformed to the W3C standards.

! And, unfortunately, those developers who did understand IE’s inadequacies used unsustainable hacks to get IE to play nicely

Issue #2: IE stagnated

60



! ...it was a huge improvement in terms of standards support and bug fixes

! ...many sites broke because either

! they weren’t built with standards in mind and the sites’ developers weren’t aware they had been opted into wanting the most accurate standards-based layouts by their software, or

! developers had used unsustainable hacks (rather than Conditional Comments) to bend IE to their will.

When IE7 came along...

61



Who wants a repeat?

62



(not me)

63



IE team wanted to o"er a means of explicitly stating what version of a given browser your site is known to work on and approached WaSP’s Microsoft Task Force for help with that.

Enter version targeting

64

It is optional, but can provide a means of migrating your site to supporting future IE versions on your own timetable.

Together, we came up a solution that was implementable in either of two ways:

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

or an HTTP header

X-UA-Compatible: IE=7

This instruction tells IE8 to present the page as though the browser was IE7.



Questions?

65

Aaron Gustafson

What you need to know about IE8 and Standardsslideshare.net/AaronGustafson

Business

What You Need To Know About IE8 and Standards