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!