IE Hack, how to make IE skip / avoid reading a line in a stylesheet

Question

Can I skip Internet Explorer or not read a line in the CSS stylesheet?

I mainly deal with IE8, but I'm interested in solutions for any version.

Answer 1

To prevent IE8 (and older) from reading styles, just use something in your selector that it does not support and that all other browsers support.

For example, add :root to your selector. Here is an example: http://jsfiddle.net/mathias/kX6tR/

 .foo { background: red; } :root .foo { background: lime; } 

:root supported in IE9 and all other browsers, so this is a safe CSS hack .

Answer 2

It is always better to avoid hacks. The right thing in your case is to override the CSS rule for IE in a separate stylesheet and include it after the main style file.

 <link rel="stylesheet" href="nice_browsers.css" /> <!--[if IE]> <link rel="stylesheet" href="dumb_ie.css" /> <![endif]--> 

In addition, regular browsers do not download the second file, so an additional HTTP request is not required. And the main CSS file will be checked (if you need it - and you probably should)

Answer 3

another variant:

Let IE read the line in your stylesheet and then overwrite the line in the specific stylesheet loaded later with a conditional comment:

http://www.quirksmode.org/css/condcom.html

this way you get your style sheets free of selector hacks.