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 *

About the author

Rik Kendell is a developer, designer and writer in Leeds, UK, specialising in responsive WordPress websites. With over 10 years experience in the industry, Rik has worked on award-winning teams at agencies, in-house and as a freelancer. Rik has worked with clients ranging from the NHS, Sky and Skipton Building Society to McDonalds, Lamb’s Navy Rum and Crabbie’s Ginger Beer.

Outside of work Rik is also a keen writer, an amateur woodworker, gamer and foodie. His blog posts, reviews and Tweets have been published by the BBC, the Evening Standard, the Guardian and the Independent. He has written guest posts for a number of agencies and industry websites.