Targeting and filtering IE with relative ease

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>
<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>

</body>
</html>

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

Brett Terpstra

Brett is a writer and developer living in Minnesota, USA. You can follow him as ttscoff on Twitter, GitHub, and Mastodon. Keep up with this blog by subscribing in your favorite news reader.

This content is supported by readers like you.