The Gorilla Awakes!

The State of CSS in an IE7 World
An Event Apart Chicago 28 August 2007

Much With the Uptake
!...on January 8th "2007#, we had the 100 mi$ionth IE7 insta$ation. However, even more important than insta$ations is usage. According to WebSideStory %the company we use to measure browser usage&, as of this week, over 25' of a$ visitors to websites in the US (ere using IE7, making IE7 the second most used browser a)er IE6.*
!Tony Chor IE Group Program Manager 12 January 2007
http://blogs.msdn.com/ie/archive/2007/01/12/100-million-ie7-installations.aspx

Advances in Standards

Fixed positioning
• min-width, max-width • min-height, max-height

• • • • • • •

Attribute selectors Child selector Adjacent sibling selector Chained classes and pseudo"classes Arbitrary"element :hover Full background-attachment:
fixed

• :first-child

Alpha channel in PNG images

• abbr tag

They Fixed fixed!
div#footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 0.5em 1em; background: white; border-top: 1px solid gray; } body { padding-bottom: 5em; } } }

Children of Elements
body > div { border: 1px solid red; body > div > div { border: 1px dotted red;

First Children
#ericmeyer > *:first-child { cuteness: 110%; } #ericmeyer:first-child { pedantics: xx-large; } td:first-child { background: yellow; }

Attribute Selectors
• CSS2.1
[attr] [attr="val"] [attr~="val"] [attr|="val"] [href] [href="http://w3.org/"] [class~="example"] [lang|="en"]

• CSS3
[attr*="val"] [attr^="val"] [attr$="val"] [href*=".org"] [href^="https"] [href$=".pdf"]

Form Styling
input[type="text"] { width: 85%; border: 1px solid #555; border-width: 0 0 1px; } input[value="required"] { color: red; font-weight: bold; } } }

Visual Link Typing
a[href$=".pdf"] { padding-right: 18px; background: url(/pix/pdf-icon.gif) 100% 50% no-repeat;

a[title*="(PDF"] { padding-right: 18px; background: url(/pix/pdf-icon.gif) 100% 50% no-repeat;

Secure Link Styling
a[href^="https"] { padding-right: 18px; background: url(/pix/lock-icon.gif) 100% 50% no-repeat; } }

Selecting Table Cells
th[scope="col"] { border-top: 1px solid black; border-bottom: 1px solid black; th[scope="row"] { border-right: 1px solid black; } th[scope="row"] + td { padding-left: 0.75em; }

Highlighting Images by Type
img[src$=".gif"] { border: 3px solid red; } img[src$=".jpg"] { border: 3px solid lime; } } img { }

Sample Diagnostics
div[id] { border: 1px dotted red;

border: 5px solid red; img[alt] { border-style: none !important; }

What About IE6?
• Dean Edwards% IE7 script!
Peekaboo bug Guillotine bug

Dead Bugs
List item whitespace bug Border chaos Text highlighting under a top border #No Scroll$ bug Disappearing list background width:auto Dotted border style XML prolog triggering quirks mode Viewport scrollbar outside HTML borders Duplicate character bug Duplicate indent 3"pixel text jog Creeping text bug Double &oat margin bug Bottom margin bug on hover IE/Win line"height bug Quirky percentages in IE

Dead Parsing Bugs
* html html>body head+body _height

New and Old Parsing Bugs
*+html * + html html* p/**/#example

overriding

!important

@import url() media;

Phantom Elementitis
• Old school 'IE6"(
* html #example {...}
<???> <html> <head></head> <body></body> </html> </???>

What the Hack...?
• Now what do we do?

<!--[if ie6]> <link rel="stylesheet" type= "text/css" href="ie6fixes.css" media= "all" /> <![endif]--> * html #example {height: 0;} /* IE6 */ *+html #example {min-height: 0;} /* IE7 */

• New school 'IE7(
*+html #example {...}

<???></???> <html> <head></head> <body></body> </html>

Better Balance
• CSS"wise, IE7 is on par with other current
browsers

It has its quirks!but then, what browser doesn+t?

• Enhancing IE6 with the IE7 script brings it
nicely up to date

• Hacking will still be necessary 'whatever form
your hacking takes(