web standards and ie7
DESCRIPTION
Web Standards and IE7. Embracing the Future, Managing the Past. Welcome!. History & Contributions. Internet Explorer’s Fascinating Past. 4. General Background. Internet Explorer’s roots go back to the first popular GUI browser, Mosaic - PowerPoint PPT PresentationTRANSCRIPT
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]-->