Putting IE-specific CSS on the main stylesheet using HTML conditional comments

[mmcgu1966]

Instead of having HTML conditional comments load IE-specific stylesheets, you can use conditional comments to put content into the HTML, including different statements. In this case, I’m using three classes: .ie, .old_ie, and .ie_nine. If it’s not IE, it uses a standard element with no class. Take a look at this block of code:

In the stylesheet, I have an INTERNET EXPLORER section down at the bottom and any IE specific code can refer to the .ie, .ie_nine, or .old_ie classes. For example, if my footer has a transparent background color, IE9 can handle it, but older IE can’t, so I would refer to .old_ie footer { } in the IE part of the stylesheet.

Besides wanting to share… anybody know if this sort of trick is a bad idea?

[Chris Coyier]

I’m a fan. I think it’s becoming kind of the standard way of handling it actually. Re: HTML5 Boilerplate:

https://github.com/h5bp/html5-boilerplate/blob/master/index.html

[TheDoc]

Very interesting. I don’t know why I’ve never thought to do this. I like it a lot!

[OniLinkCR]

I use Paul Irish’ approach. I don’t know if it’s the same as the Boilerplate, but I recommend it.

[Author]

Posts