Targeting and filtering IE with relative ease

[Tweet : ADN : nvALT]

I just read a blog post by James Scariati regarding a method to target every version of IE from a single stylesheet. The idea was to add a wrapper div with a specific class using conditional comments, allowing you to target IE6 using CSS specificity rather than separate stylesheets. The commenters took it a bit further, and I decided to test out a slight permutation.

Using the double comment trick (as shown below) to filter IE, you can add a series of statements that put a class on the body tag for the page (without resorting to javascript or browser sniffing). I’ve given it a quick test in Firefox, Safari and Internet Explorer 6, 7 and 8. It seems to be working quite well. This may be my new body tag! The code below includes a button that will pop up an alert showing which class has been assigned to the body tag after the page loads.

<!DOCTYPE html>
<head><title>IE Targeting</title></head>

<!--[if ! IE]><!--><body class="notIE"><!--<![endif]-->
<!--[if IE 6]><body class="ie6"><![endif]-->
<!--[if IE 7]><body class="ie7"><![endif]-->
<!--[if gte IE 8]><body class="ie8"><![endif]-->

	<button onClick="alert(document.getElementsByTagName('body')[0].className);">Check it</button>


Thanks to James Scariati for the idea, Greg McAusland for the evolution of it!