You are on page 1of 4

The Gorilla Awakes!

The State of CSS


in an IE7 World
An Event Apart Chicago
28 August 2007

Much With the Uptake Advances in Standards


!...on January 8th "2007#, we had the 100 mi$ionth IE7 insta$ation. • Fixed positioning
However, even more important than insta$ations is usage. • min-width, max-width
According to WebSideStory %the company we use to measure browser • min-height, max-height
usage&, as of this week, over 25' of a$ visitors to websites in the US Attribute selectors

(ere using IE7, making IE7 the second most used browser a)er IE6.*
• Child selector
!Tony Chor • Adjacent sibling selector
IE Group Program Manager
• :first-child
12 January 2007
http://blogs.msdn.com/ie/archive/2007/01/12/100-million-ie7-installations.aspx • Chained classes and pseudo"classes
• Arbitrary"element :hover
• Full background-attachment: fixed

• Alpha channel in PNG images


• abbr tag

They Fixed fixed! Children of Elements


div#footer { body > div {
position: fixed; border: 1px solid red;
bottom: 0; }
left: 0; right: 0; body > div > div {
padding: 0.5em 1em; border: 1px dotted red;
background: white; }
border-top: 1px solid gray;
}
body {
padding-bottom: 5em;
}
First Children Attribute Selectors
#ericmeyer > *:first-child {
cuteness: 110%;
• CSS2.1
[attr] [href]
}
[attr="val"] [href="http://w3.org/"]

#ericmeyer:first-child { [attr~="val"] [class~="example"]

pedantics: xx-large; [attr|="val"] [lang|="en"]


}

td:first-child { • CSS3
background: yellow; [attr*="val"] [href*=".org"]
}
[attr^="val"] [href^="https"]
[attr$="val"] [href$=".pdf"]

Form Styling Visual Link Typing


input[type="text"] { a[href$=".pdf"] {
width: 85%; padding-right: 18px;
border: 1px solid #555; background: url(/pix/pdf-icon.gif)
border-width: 0 0 1px; 100% 50% no-repeat;
} }

input[value="required"] { a[title*="(PDF"] {
color: red; padding-right: 18px;
font-weight: bold; background: url(/pix/pdf-icon.gif)
} 100% 50% no-repeat;
}

Secure Link Styling Selecting Table Cells


a[href^="https"] { th[scope="col"] {
padding-right: 18px; border-top: 1px solid black;
background: url(/pix/lock-icon.gif) border-bottom: 1px solid black;
100% 50% no-repeat; }
} th[scope="row"] {
border-right: 1px solid black;
}
th[scope="row"] + td {
padding-left: 0.75em;
}
Highlighting Images by Type Sample Diagnostics
img[src$=".gif"] { div[id] {
border: 3px solid red; border: 1px dotted red;
} }
img[src$=".jpg"] {
border: 3px solid lime; img {
} border: 5px solid red;
}
img[alt] {
border-style: none !important;
}

What About IE6? Dead Bugs


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

Dead Parsing Bugs New and Old Parsing Bugs


* html *+html
html>body * + html
head+body html*
_height p/**/#example
overriding !important @import url() media;
Phantom Elementitis What the Hack...?
• Old school 'IE6"( <???>
<html>
• Now what do we do?
<head></head>
* html #example {...} <body></body> • <!--[if ie6]>
</html> <link rel="stylesheet" type= "text/css"
</???> href="ie6fixes.css" media= "all" />
<![endif]-->

• New school 'IE7( <???></???> • * html #example {height: 0;} /* IE6 */


*+html #example {...} <html> *+html #example {min-height: 0;} /* IE7 */
<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(