IE Conditionals - a class of their own

While looking under the hood of CSS Tricks, a site by the CSS/Wordpress fanatic Chris Coyier I spotted some very interesting code.

At first glance it all seemed commented out.

Dig a little deeper and the whole snippet takes shape.

<!--[if lt IE 7]>
    <html class="no-js ie6 ie" lang="en">
<![endif]-->
<!--[if IE 7]>
    <html class="no-js ie7 ie" lang="en">
<![endif]-->
<!--[if IE 8]>
    <html class="no-js ie8 ie" lang="en">
<![endif]-->
<!--[if gt IE 8]>
    <html class="no-js" lang="en">
<!--<![endif]-->

I'm used to seeing the condition statement to load IE specific style-sheets, but never such a clever deal as this. Rather than waste another resource download - and possible blocking - Chris can serve just one style-sheet. Using the same methods that has made Modernizer so popular you can target browsers using the HTML class:

.ie{ //IE generic Styles...}

.ie6{ //IE6 styles...}

So I Google'd it, and realised that it's included in the HTML5 boilerplate and documented on Paul Irish's website. Read more about "Conditional stylesheets vs CSS hacks? Answer: Neither!" and then send me a message telling me an idiot. Really? I don't mind!

Maybe I should spend a bit of time reading through Paul Irish's blog?

comments powered by Disqus