Target IE Only CSS Tutorial
I've compiled/created the best/easiest ways that I know of to target IE - IE Hacks, IE Only CSS, IE Only CSS Via JS, IE Conditional Comments, IE CC Tricks, and IE PHP Browser Sniffer. Which method "you" choose to use is completely up to you. I endorse, nor oppose, any one method over the other. I've never had to "Hack" any browser other than IE, so IE is who I will solely focus on targeting in this tut. If you need the ability to independently target all browsers, then see Mike’s Experiments. I don't really like having to make a separate style sheets for IE - it's a pain! So the below methods enable one to write all your "specific IE Only CSS" within the confines of your main style sheet. Arguably, a much cleaner and much easier way to go!
Method 1 uses jQuery to do the dirty work (AKA, browser detection using jQuery)! Within your main style sheet, all you have to do is simply put .ie(+version number) in front of the selector you need to target. It's the easiest and cleanest of the bunch, but, of course does not work if JS is turned off. For IE only, the JS adds the class="ie(+ version number)" to the html tag. Why the html tag and not the body tag? Because I removed it from the jQuery $(document).ready(function(), and therefore, jQuery does not have to wait until the document is ready (fully downloaded) before adding the class to the html, as explained in detail here. In doing so, there is never any Flash of Unstyled Content (FOUC), which otherwise, can happen with larger pages.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Target IE Method #1</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
if($.browser.msie){
$('html').addClass('ie' + $.browser.version.substring(0,1));
}
</script>
<style type="text/css">
.ie6 p {color:red;}
.ie7 p {color:green;}
.ie8 p {color:blue;}
</style>
</head>
<body>
<p>Some Text</p>
</body>
</html>
Method 2 essentially does the same thing as Method #1, but does not rely on JS to function. Definitely the more "full proof" of the two, but, a little messier on the html. Choose your poison! Only IE gets the one extra div, and you get the luxury of writing all you IE specific styles within your main style sheet. A pretty good trade off I think!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Target IE Method #2</title>
<style type="text/css">
.ie6 p {color:red;}
.ie7 p {color:green;}
.ie8 p {color:blue;}
</style>
</head>
<body>
<!--[if IE 6]><div class="ie6"><![endif]-->
<!--[if IE 7]><div class="ie7"><![endif]-->
<!--[if IE 8]><div class="ie8"><![endif]-->
<p>Some Text</p>
<!--[if lt IE 8]></div><![endif]-->
</body>
</html>
Method 3 is working off the same premise as the above two techniques, this method is using a little IE Conditional Comment trickery to target IE (Stu Nicholls demonstrates this, and SWFObject static publishing method employs this technique as well). Instead of adding the extra div in IE, this method simply gives IE a class of ie(+ version number) on the body tag. IE sees the first body tag, and all the other browsers see the "real" body tag. Simple and clean! Then, in your css, do the same as described above.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Target IE Method #3</title>
<style type="text/css">
.ie6 p {color:red;}
.ie7 p {color:green;}
.ie8 p {color:blue;}
</style>
</head>
<!--[if IE 6]><body class="ie6"><![endif]-->
<!--[if IE 7]><body class="ie7"><![endif]-->
<!--[if IE 8]><body class="ie8"><![endif]-->
<!--[if !IE]><!-->
<body>
<!--<![endif]-->
<p>Some Text</p>
</body>
</html>
Method 4: some times you just need a good old fashion "Hack". Each hack shown below ONLY target their intended browser. Both the ones for IE6/7 are deemed safe to use. The one for IE8 - probably not so much? But, it is the only working IE8 hack on the web today (I found it!). There are a couple others floating around but they don't work unbeknownst to the authors. Like this... p{color /*\**/: blue\9} also targets IE7, and the others you'll find, just plain don't work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Target IE Method #4</title>
<style type="text/css">
* html p {color:red;} /* Valid/Safe Hack For IE6 */
*+html p {color:green;} /* Valid/Safe Hack For IE7 */
p {color:blue\ !important;} /* InValid/Not-So-Safe Hack For IE8 */
</style>
</head>
<body>
<p>Some Text</p>
</body>
</html>
Method 5: and of course, you always have your Plain-Jane IE Conditional Comments. I always go here and here when I need a refresher course on IE CC's.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; }Target IE Method #5</title>
<!--[if IE 6]>
<style type="text/css">
p {color:red;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
p {color:green;}
</style>
<![endif]-->
<!--[if IE 8]>
<style type="text/css">
p {color:blue;}
</style>
<![endif]-->
</head>
<body>
<p>Some Text</p>
</body>
</html>
Method 6: This one is Amazing! Bye-bye IE CC's, and hello the IE PHP browser sniffer! There are some other good PHP browsers sniffers floating around the web, but if all they do is feed each IE version a different style sheet, then they're no better than plain old IE CC's (when targeting IE). So, maintaining with the spirit of my tutorial here, I took what a member posted in Killersites Forums, I trimmed and altered some of it to allow us to target IE our main style sheet, and a forum member named Krillz helped me clean it up and trim it even more. The html in all other browsers is left untarnished, and only IE gets a class="ie(+ version number)" on the body. What your left with is a new super clean way to target IE CSS!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Target IE Method #6</title>
<?php $browser = ''; for($i = 6; $i<9; $i++ ) { if (strpos($_SERVER["HTTP_USER_AGENT"], "MSIE $i.0")) $browser = 'class="ie'.$i.'"';} ?>
<style type="text/css">
.ie6 p {color:red;}
.ie7 p {color:green;}
.ie8 p {color:blue;}
</style>
</head>
<body <?php echo $browser; ?>>
<p>Some Text</p>
</body>
</html>
