Conditional comments are a great way to get around annoying IE bugs and limitations, but there’s one common frustration associated with their use – you have to maintain separate stylesheets for each version of IE that you want to target. That is, developers will usually set up something like this in the <head> of their document:
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]--> <!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]--> <!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie8.css" /><![endif]-->
For complex sites, though, this setup gets cumbersome, because if you later spot an error in IE, you have to figure out if the source of the problem is coming from your main stylesheet or an IE-specific one. It also makes maintenance difficult, because code that needs to be applied to every version of IE has to be copied across three different stylesheets and kept in sync as updates are made.
But there’s a great technique to get around this, using just one stylesheet but still targeting any version of IE that you want. I take no credit for this method – I actually have no idea who came up with it first – but it comes in very handy.
Basically, instead of using conditional comments to load unique stylesheets, use them to add a special <div> around the entirety of your document:
<!--[if IE 6]> <div id="ie6"> <![endif]--> <div id="content"> <div id="main"></div> <div id="sidebar"></div> </div> <div id="footer"></div> <!--[if IE 6]> </div> <![endif]-->
Then, you can target IE6, for example, simply by prepending a selector in your stylesheet with #ie6:
#main {background: white;}
#ie6 #main {background: black;}
The #ie6 styles will always take precedence over the regular styles, because they’re “weighted” more (two elements with an ID in the selector versus one, in the above example). And as an added benefit, you can now see your IE-specific styles right next to your regular styles, making debugging and maintenance a lot easier.
17 Comments
Good Idea, i’d fiddle the implementation slightly though and make it a body class, kill off the extra div.
Good concept.
Really interesting idea! I wonder if this could be “tweaked” to allow it to work for any of the IE browsers… i.e. it would wrap the page in an “ie6″ div if IE6, an “ie7″ div if IE7, etc.
@Greg McAusland – good idea, too… but how? Javascript? How would you implement a custom class on the body tag depending upon the browser?
well, you could do it with javascript sure.. but a simpler implementation might be like so:
the double barrelled comment notation on the first line makes sure that the other browsers see the code, but ie still comments out the line. So effectively thats your every-other browser code. then just replace the body with a class id if it’s ie6.
if you’re using wordpress and the body class method it might be inappropriate but seems like a good clean way of implementing this technique on static sites. Adding a div won’t kill anyone though
just another option!
ps, i took a shot in the dark at the inline code tag.. time will tell if i got it right
@John – yeah, you could definitely do that. At the top, just do:
Then end the
<body>with:Since you’d always need the same closing
<div>, regardless of IE version, you’d only need a single conditional comment at the end that targeted all versions.I haven’t personally tried that, but I don’t see why it wouldn’t work.
@Greg – actually, that’s a good idea. You mean something like this?
Then the CSS would be the same (#ie6 #content {} or whatever), but you wouldn’t have the extra
<div>in the HTML. Good suggestion!yep! tough remember you need a default fallback for everyone with a decent browser, posted something that should work above
Wow, that’s really clever (the double comment). It never even occurred to me you could do that. Nice! Learn something new every day
@Greg & @James
Thanks! This is WAY cool… and I LOVE learning all this neat stuff. Thanks so much for posting (and for continuing the thought process about it, too).
Can’t wait to implement this soon!
I love this idea … and it would really simplify things on so many levels; reducing the number of stylesheets to maintain and troubleshoot, reducing the number of http requests, and just more organized code because you can have all the different css styles together – easily seeing what has browser specific styles.
Going to try this on a site we are launching this week
Thanks!
It’s named SSI (Server Side Includes) conditionals it works depending on the client user-string but also it depends on a server feature which many servers don’t support.-
Good idea. I saw the SWFObject uses this way to add valid XHTML markup for flash in website. The FlashSatan solution for adding flash in website (at Alistapart) also uses it to.
Nick skill,it’s very useful for me, thanks very much!!
This use is interesting but I rather have 3 stylesheet that bits and pieces all over my page.
On many IE bug you would still have to do a separate stylesheet, like the double margin bug, imagine the nightmare it can cause to have IE specific CSS AND code in your page !
Although I do like this method. I don’t particularly like the extra markup. I do like the concept of a single stylesheet however. I will investigate this further but I would prefer to append either a class to the via JavaScript preferably with jQuery’s .browser, and .browser.version.
Thanks for sharing.
.. “a class to the body”
Honestly, if your sites differ that much between versions of IE, I think you need to clean up your CSS a bit more across the board. I really only find myself needing to fix IE6 for some of the more advanced features rather than many specific tweaks to IE7 and IE8. With that said, I really don’t support IE6 unless the client approves it.
And I agree with Stephane, I’d much rather just do three stylesheets since it feels somewhat sloppy this way and still doesn’t alleviate needing seperate stylesheets.
Oh yeah, I’m not saying you should always set up your sites this way. Not at all. The point was more to show that it could be done for any version of IE that you need, not necessarily to have three separate sets of styles for a single site.
If I absolutely *have* to write invalid code to get something to work in IE (like :first-child support via an expression), I’ll put that in a conditional stylesheet so it doesn’t get loaded for other browsers. That way, my main stylesheet will still validate. That’s usually how I use conditional comments.
3 Trackbacks
[...] This post was mentioned on Twitter by bkmacdaddy designs, Jamie Le Souef and Richard Laksana, Brett Widmann. Brett Widmann said: RT @bkmacdaddy: Target Every Version of IE from a Single Stylesheet – http://bit.ly/9ZxB4P [...]
[...] just read a blog post by James Scariati regarding a method to target every version of IE from a single stylesheet. The idea was [...]
[...] Target Every Version of IE from a Single Stylesheet « James Scariati [...]