A wonderfully simple, wonderfully useful IE CSS hack

For the past few years, I’ve been doing a lot of web development. Part of my design mantra (at least from a code perspective) is table-less design using CSS that works in as many browsers as humanly possible.

Since Firefox‘s support for CSS standards is superior to that of IE, I generally code everything so it looks good in Firefox, then apply hacks to get it to work in IE. (Most other browsers require minimal tweaking once something works well in Firefox and IE.) At times, the hack is to add some IE-specific CSS code, which is usually done using the asterisk hack:

.myClass {
 background-color:white;
}
* html body .myclass {
 background-color:black;
}

Only IE recognizes the second line, so in IE, the background color of any element with the myClass class will be black; for all other browsers, it will be white.

However, this hack can be replaced by one I found today, which is beautifully simple and elegant: add an underscore before the CSS property name.

body {
 background: green; /* show to Mozilla/Safari/Opera */
 _background: red; /* show to IE */
}

It works in IE Windows only, according to the guy who wrote about it on his blog, Joen Asmussen. Hats off to you, Joen — a great solution not only in its simplicity (one extra character) and in its readability (you can visualize the IE-only hack in the same content as your non-IE CSS).

For more on CSS hacking with IE, check out Essentials of CSS Hacking For Internet Explorer by Marko Dugonjic. For more info on CSS standards support in modern browsers, check out Web Browser Standards Support by David Hammond.

0 thoughts on “A wonderfully simple, wonderfully useful IE CSS hack

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.