Target Internet Explorer The Right Way

CSS hacks are useful knowledge to possess but they are hard to learn. In this article I'm going to address few points about targeting specific browsers — both using hacks and then pointing out some other more elegant ways of being cross browser compatible.

CSS Hacks

To target IE 6 use the star hack:

* html .selector {}

where the star '* html' is prepended to any selector. And to target the property of IE 6 instead of the selector use the underscore hack:

.selector {  
    _margin: 5px;

Now how about IE 7? There are similar hacks available for that. Target selectors by prepending a star '*' followed by a plus sign '+' and 'html' immediately before given selector thusly:

*+html .selector {}

And to target both IE 6 and 7, use:

.selector, {}

For properties on IE 7 and below, use any of these characters prepended to the property: '! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |'. For example:

.selector {  
    !margin: 5px;

/* or */

.selector {
    *margin: 5px;

Want to target IE 8/9? No problem, add '\0/' to the end of the rule that you want:

.selector {  
    margin: 5px\0/;

And similarly if you want to target all IE browsers (6, 7, 8, 9, 10), then go with adding '\9' to the end of the rule you desire only to present to IE users.

.selector {  
    margin: 5px\9;

Conditional Classes

CSS hacks have problems including but not exclusive to:

  • They look terrible and are hard to read.
  • They are really hard to memorize.
  • The add complexity to your stylesheets.
  • They don't validate.

There are a couple of solutions out there but my favorite (so far) is Paul Irish's method from the legendary year of 2008. It introduces classes added on the html element, specific to each version of IE. Conditional classes are widly used — most famously by the html5boilerplate project. Read more on the concept at Paul's website.