out Internet Explorer 8 users. Of course, there’s another technique if doing
nothing isn’t the right approach for you.Change the HTML Code
The most obvious solution that works everywhere is to modify the underlying
code. You could attach classes to all the cells in the table and apply basic
CSS to each class. This is the worst choice, because it mixes presentation
and content and is exactly the kind of thing we’re using CSS3 to avoid.
Someday we wouldn’t need all that extra markup, and it would be painful to
remove it.Use Selectivizr
The jQuery library already understands most of the CSS3 selectors we used,
so we could quickly write a method to style the table that way, but there’s an
easier way.Keith Clark wrote a great library called Selectivizr that adds support for CSS3
selectors to Internet Explorer.^1 All we need to do is add it to our page.The Selectivizr library can use jQuery, Prototype, or several other libraries
under the hood, but jQuery supports all the pseudoclasses we’ve used here.To use it, we download Selectivizr and then link it in the <head> section of the
HTML document. Since this is for Internet Explorer only, we can place the
link in a conditional comment so it’ll be downloaded only by your IE users.css3_advanced_selectors/index.html
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'>
</script>
<!--[if (gteIE 5.5)&(lteIE 8)]>
<scriptsrc="javascripts/selectivizr-min.js"></script>
<![endif]-->Note that we’re loading jQuery here too, and in this particular case we have
to load jQuery in the <head> of the document. We could place the jQuery call
in the conditional comment, but chances are good we’ll need jQuery for other
things anyway.With this fallback in place, things look great in Internet Explorer, as the fol-
lowing figure shows.Chapter 4. Styling Content and Interfaces • 76
Download from Wow! eBook <www.wowebook.com> report erratum • discuss