IE10 Conditional Class

21st April 2013

Reading Time:

While having some recent compatability issues with Internet Explorer (of course), I stumbled across a real gem in an article on IE10 CSS hacks.

Conditional comments are frequently used to iron out hiccups in older versions of IE, but IE10 doesn’t support this. Sadly, that means that the conditional classes that Paul Irish recommends (which are included in the HTML5 Boilerplate) only work up to (and including) IE9.

The following script is ignored by IE6 – IE9 (due to the conditional comment), and then checks for conditional compilation:


<!--[if !IE]><!-->
<script> 
    if (/*@cc_on!@*/false) { document.documentElement.className+=' ie10'; } 
</script>
<!--<![endif]-->

This adds class="ie10" to your <html> element, so you can give it a bit of this in your stylesheet:


.ie10 .content {
     /* Some lovely styling */
 }

This does use JavaScript, which some may see as a bad thing, but that hasn’t put me off yet.

Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *