Web Standards and IE7

Embracing the Future, Managing the Past

Welcome!

History & Contributions

Internet Explorer’s Fascinating Past

5

General Background

Internet Explorer’s roots go back to the first popular GUI browser, Mosaic

One of the longest browsers in use, IE is also one of the most widely used browsers

It is estimated that IE, in particular IE6, is used by 1/2 a billion people worldwide

That’s 1/12th of the world’s population!

6

Historical Landmarks

Internet Explorer 3.0 had the most advanced CSS 1 implementation of its time

Internet Explorer 4.0 introduced the most advanced DOM and scripting options for its time

Internet Explorer 5.0 (for the Mac) introduced the Tasman rendering engine, which was the most advanced CSS rendering for its time

Internet Explorer 6.0 introduced DOCTYPE switching, which empowered web authors to choose the rendering mode in which they wanted to work

XMLHttpRequest was introduced by Microsoft, and has grown to form the cornerstone of asynchronous scripting technologies (Ajax)

7

Trouble in Paradise?

IE 6.0, at its release, is a strong standards browser

Security concerns started to come to the public eye

After several years, it was clear that the lack of a browser update was severely affecting designers, developers and perhaps most painfully - end users

Spyware, malware, endless pop-ups and other disconcerting problems influenced the rise of “alternative” browsers such as Mozilla Firefox

8

The Five Year Wait

Despite these problems, Microsoft at first determines that no future standalone browser will be developed

Instead, the browser was to be fully integrated into what we now know as Windows Vista

However, security concerns and public outcry from standards-oriented developers via blogs, the Web Standards Project and other community platforms encouraged Microsoft to review its browser plans

9

IE7

Once the decision to build IE7 was in place, activity in both the security and standards sides began to focus on ways to fix bugs and prioritize implementation

The WaSP / Microsoft Task Force was created in late 2006 as a means to begin open dialog between the standards designers and developers and the IE7 team

Along with assistance from WaSP, the bug reports found at positioniseverything.net, and bug reports at quirksmode.org, a prioritization of bug fixes and implementations emerged

10

11

Adoption Rates

How IE Browser Adoption is Going

17

Adoption Rate Review

IE6 took one year to become the leading browser

IE6 took one month to become important

IE7 will take about six months +/- to be the leading browser

IE& was never unimportant!

Yummy Support

Good things in IE7

19

Child Selectors >

Child selectors select only the children of an element:

#content > p

Selects only paragraphs that are children of #content

#content > p > a

Selects only anchors that are children of paragraphs that are children of #content

21

Adjacent Sibling Selectors +

Adjacent sibling selectors select only the adjacent sibling of an element:

th + td

Selects the td that immediately appears next to a th

tr + tr + tr

Selects only the tr that is a sibling to a tr that is a sibling of another tr

23

Attribute Selectors [ ]

Attribute selectors select by attribute:

a[title]

Selects any anchor with a title attribute

a[id=“cart”]

Selects only the anchor with an id of “cart”

26

Attribute Selectors [ ]

img[alt~=“offer”]

Selects any anchor with an alt attribute that contains multiple, space separated words and the word “offer” such as:

<img src=“sale.jpg” alt=“special offer” />

28

Attribute Selectors [ ]

img[alt | =“offer”]

Selects any anchor with an alt attribute that contains hyphenated words, such as:

<img src=“sale.jpg” alt=“special-offer” />

30

:hover Everywhere

In IE6, the :hover dynamic pseudo class was only available on anchor elements

In IE7, :hover is available for all elements:

p {color: #999;}p:hover {color: #000;}

31

Alpha Transparency PNG

IE7 brings alpha transparency PNGs to designers

This is an extremely valuable leap forward in terms of offering sophisticated design options

We have some backward compatible options to offer the support to IE6 too, giving us real power with background and other graphics

You can use Dean Edwards’ IE7 Scripts or see http://bjorkoy.com/post/show/8 for an .htc / JavaScript solution specific to IE6

Managing Backward Compatibility

IE6 and IE7 Together

34

To Hack or Not to Hack?

Best strategy: Don’t hack!

If hack, then valid hacks

AVOID bug-related hacks:

* html

35

If Hack then Surgical Correction

QuickTime™ and aTIFF (LZW) decompressor

are needed to see this picture.

36

Dean Edwards’ IE7 Scripts

.htc and JavaScript files

Reside on server

Free to use

Essentially makes IE6 run like IE7

http://dean.edwards.name/

37

Conditional Comments

Use conditional comments to “hide” CSS rules from specific IE browsers:

<link href=“screen.css” type=“text/css” /><!-- [if lt IE 7]><link href=“ie6.css” type=“text/css” />

<![endif]-->

38

Questions?

Thank You!http://molly.com/ molly@molly.com