Forums

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:


<!--[if IE 9]>
<body class="ie ie_nine">
<![endif]-->

<!--[if lt IE 9]>
<body class="ie old_ie">
<![endif]-->

<!--[if !IE]>
<body>
<![endif]-->

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?

chriscoyier

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!

kgscott284

I use that method all the time, it has made my life a million times easier.

I say go for it...IE conditionals are meant to hold specific IE content after all.

mmcgu1966

Turns out, this is badly formatted HTML, but is Microsoft's badly formatted HTML, specifically for IE. Here's my updated version.. note the different HTML format between the IE and !IE lines.

Oddly, Boilerplate doesn't look like it includes a not-IE option and ends-up not having an HTML tag (it modifies the HTML tag instead of the body tag as I am.


<!--[if IE 9]>
<body id="" class="ie_nine">
<![endif]-->

<!--[if lt IE 9]>
<body id="" class="ie_old">
<![endif]-->

<!--[if !IE]>-->
 <body id="" class="">
<!--<![endif]-->

OniLinkCR

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

treehouse : what would you like to learn today?

Forums

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