IE Hack how to make IE to skip/avoid from reading a line in the style sheet

Question

Is it possible to make Internet Explorer skip or avoid reading a line in the CSS stylesheet?

I'm mostly concerned with IE8, but interested in solutions for any version.

Answer 1

To prevent IE8 (and older) from reading the styles, simply use something in your selector that it doesn’t support and that all other browsers support.

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

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

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

Answer 2

It is always better to avoid hacks altogether. The right thing to do in your case is re-define your 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 normal browsers will not download the second file, so no extra HTTP request. And the main CSS file will validate (if you care about that - and you probably should)