Best Practices: How to Include IE-Specific CSS Styles and Stylesheets
Although good CSS should be written to be as browser-universal as possible, even the best front end developers find it necessary at times to target specific browsers for certain styles. In most cases this means writing a set of special CSS blocks to handle eccentricities in IE and its various versions.
There’s a wide variety of reasons to target specific browsers: IE6’s lack of native support for transparent png24’s, pesky ‘has-layout’ bugs, and IE6’s lack of min-height support are just a few.
CSS Selector Hacks
One way to target specific browsers is through CSS selector hacks, which take advantage of quirks in different browser implementations. Perhaps the best known browser hack is the “star html” hack. Basically you prepend * html to any normal selectors in order to target IE6 specifically:
* html div {
margin: 1em;
}
When called in a stylesheet, this selector will work in IE6 and below, but fall flat in all other browsers. This isn’t because IE6 is a good browser, in fact it’s precisely the opposite. Most browsers correctly treat the HTML object as the root of the DOM, however this is not the case with IE6 and below.
However one thing to remember when using the * html hack is that you can’t group any selectors in a block:
/* the selector below will fail: */
* html div, * html p {
}
/** instead break your selectors out into separate blocks: **/
* html div {
}
* html p {
}
Another thing to remember is that IE7 will also honor this selector, however only when it’s in ‘quirks mode’ (or backwards compatability mode). As good developers our document should never render in quirks mode, so to target IE7 we will need a different selector hack, *:first-child+html:
*:first-child+html div {
padding: 1em;
}
The *:first-child+html hack works well to target IE7 only, again provided that it is not in quirks mode. And you can feel free to group selectors with this one.
The Verdict:
CSS selector hacks work well for small chunks of CSS, but as their name suggests they are very “hacky”.
The Better Way: Browser Conditionals
Although CSS selector hacks are a decent way to target specific browsers, it is a much better practice to use browser conditionals. Rather than including individual styles, this method can be used to include an entire stylesheet (or any other markup you want).
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
In this example we used a browser conditional to include a special stylesheet for IE6 only. We could also have included a stylesheet for IE6 and below:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Here we are selecting all browsers that are “less than” IE 7 (use “gt” in the conditional for greater than). Generally this is the way to apply a stylesheet for IE6, since you will most likely also need those styles for any legacy versions.
The Verdict:
Browser conditionals are generally preferred over CSS selector hacks simply because they use native browser functionality as opposed to hacking browser imperfections. The developers of MSIE recognize it’s shortcomings (I hope), and have provided a method to address its funky styling methods.
Additionally by using the browser conditional method there is the added benefit of only loading styles for the browsers that will use them. Firefox users, for instance, would not have to download any of the styles included in a browser conditional for IE. Sure we are probably only talking about a few kB max, but every little bit helps.
Tags: best practices, cross-browser, CSS, quirks mode, selectors