The State Of Css In An Ie7 World

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

• :first-child

• • • •

Chained classes and pseudo"classes Arbitrary"element :hover Full background-attachment:

fixed

Alpha channel in PNG images

• abbr tag

They Fixed fixed! div#footer {

Children of Elements body > div {

position: fixed;

border: 1px solid red;

bottom: 0;

}

left: 0; right: 0;

body > div > div {

padding: 0.5em 1em; background: white; border-top: 1px solid gray; } body { padding-bottom: 5em; }

border: 1px dotted red; }

First Children #ericmeyer > *:first-child { cuteness: 110%;

Attribute Selectors • CSS2.1

} #ericmeyer:first-child { pedantics: xx-large;

[attr]

[href]

[attr="val"]

[href="http://w3.org/"]

[attr~="val"]

[class~="example"]

[attr|="val"]

[lang|="en"]

} td:first-child {

• CSS3

background: yellow; }

Form Styling input[type="text"] {

[attr*="val"]

[href*=".org"]

[attr^="val"]

[href^="https"]

[attr$="val"]

[href$=".pdf"]

Visual Link Typing 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 a[href^="https"] {

Selecting Table Cells th[scope="col"] {

padding-right: 18px;

border-top: 1px solid black;

background: url(/pix/lock-icon.gif) 100% 50% no-repeat; }

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"] {

Sample Diagnostics 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? • Dean Edwards% IE7 script!

Dead Bugs Peekaboo bug

List item whitespace bug

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 borders

Quirky percentages in IE

Dead Parsing Bugs

New and Old Parsing Bugs

* html

*+html

html>body

* + html

head+body

html*

_height

overriding

p/**/#example !important

@import url() media;

Phantom Elementitis • Old school 'IE6"( * html #example {...}

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





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(

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



•

* html #example {height: 0;} /* IE6 */ *+html #example {min-height: 0;} /* IE7 */