CSS Hacks

See Centricle CSS filters for a useful overview.

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.

There are 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. See my Keep CSS simple column for the complete argument against browser hacks.

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.
    @import('notForNetscape4.css');
    
    Netscape 4 will not read the CSS in the notForNetscape4.css file.
  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. In general I advise you to do the same.

Box Model Hack?

But what about the Father of all CSS hacks, Tantek Çelik's famous Box Model Hack? I've never actually used it, mainly because I've always felt that the whole sequence of quotes and brackets and backslashes is an eyesore. I do admire it in the abstract, though, 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.