CSS Hacks

See Centricle CSS filters for a useful overview.

There is an incredible number of CSS hacks available that are said to make sure that certain styles are or aren't parsed by certain browsers. In general I strongly feel you shouldn't use them.

For the complete argument against browser hacks, see my Keep CSS simple column.

After I published this column Simon Willison came up with one (and only one) case in which CSS hacks are allowed. If you actively maintain a site (because it's your personal blog, for instance) CSS hacks are less dangerous. When browser compatibility patterns shift you can easily update the offending CSS.

Any "build once, then forget" site, though, should not use CSS hacks. When browsers move on you'd have to update the site for free, since you cannot make your client pay for your mistakes. Besides, for all such sites you'd have to remember which hack you used where, and why, and that's impossible.

Although in principle I agree with Simon's argument, I will not use CSS hacks in this site, except those targeted at dead browsers.

The safe list

Below I started a list of safe hacks, that is, a list of hacks that are extremely unlikely to misfire in the future.

  1. The @import hack against Netscape 4. This browser is extremely dead by now.
    Any style sheet you import is not parsed by Netscape 4. Hence you should move all declarations that don't work in Netscape 4 to this style sheet.
  2. The commented backslash hack (original) against Explorer 5 Mac. This browser, too, is dead.
    The commented backslash hack works as follows:
    selector {
    	property: value for Explorer 5 Mac
    	First comment. Explorer 5 Mac misses the end-of-comment
    	because of the backslash
    selector {
    	property: value for all other browsers
    	Second comment. Explorer 5 Mac sees the end of this
    	comment as the end of the previous one
  3. Conditional comments, aimed at Explorer Windows only.

That's it. I don't use any more hacks. I'm interested in hearing about hacks against dead browsers, but I feel Netscape 4 and Explorer 5 Mac are adequately covered and that there aren't any other dead browsers.


But what about the father of all CSS hacks, Tantek Çelik's famous Box Model Hack? I've never actually used it, though I did admire it in the abstract because it showed that CSS hacks are possible. More recently I catch myself wondering if this hack hasn't opened a can of worms that should have remained closed.

A more practical question: can we use it? At the moment I simply don't know.

The pro is that it is solely targeted at Explorer 5 on Windows. The bug that allows this hack has been fixed in Explorer 6 (at least, so I heard, as I said I never actually used it).

The con is that we cannot be sure that an (as yet hypothetical) Explorer 7 will not revert to earlier behaviour, so that the CSS bug again works and the hack again fires while it shouldn't. Unlikely, sure, but not impossible.

In other words, will Explorer 5 stay dead enough to use this hack?

I myself will not use it, mainly because I've always felt that the whole sequence of quotes and brackets and backslashes is an eyesore. That shouldn't keep you from trying it, though.