Hacking your CSS

I know I have made my feelings about browser hacking quite clear, but I do have to use workarounds on client facing sites. Organising your hacks or workarounds so they make sense is a tough task, and I thought I would share how I order my hacks for ease of use. I prefer the route of seperating each browser to be hacked into it’s own stylesheet, because then you can order them so each rule is applied in the same order, which is far easier to read and work with.

I start with a root stylesheet imported so only version 4+ browsers can use it. This file itself imports a CSS file for Windows IE browsers and a CSS file for Macintosh IE, plus the generic styles that all good browsers can use. This method is the same as that used by John Serris at Phono Phunk, (nice site as well), and uses various filters to only show styles to the different families.

/* Actual styles for nice browsers */
@import "layout.css";
@import "text.css";
/* Import list IE Win family */
/*\*/ @import "hacks-ie-win.css"; /**/
/* Import styles for IE Mac */
/*\*//*/ @import "hacks-ie-mac.css"; /**/

For IE on OS X, this is the end of it, and the rules in this style sheet should be seen by no other browsers. For IE on Windows, I then import three style sheets for IE 5, 5.5 and 6 respectively using the hacks-ie-win.css file. These CSS files will also be seen by some good browsers, so the rules they contain have to use the * html hack to apply them to IE only. The method used to import the IE 6 sheet would also show it to IE on OS X, but that browser won’t see this page because it won’t see the hacks-ie-win.css file.

/* Import only for IE 6 */
@import "null?"\{";
@import "win/ie-6.css";
@import "null?"\}";
/* Import only for IE 55 */
@media tty {
i{content:"";/*" "*/}}@m;
@import 'win/ie-55.css'; /*";}
}/* */
/* Import only for IE 5 */
@media tty {
i{content:"";/*" "*/}};
@import 'win/ie-5.css'; {;}/*";}
}/* */

Thats a total of six files and a sub-folder, which is a lot of extra weight, but in past projects I have hacked out about 50% of the original rules for poor browsers, and this saves a lot of confusion when working on a large site. Just as a disclaimer, this post doesn’t at all change my stance on using hacks. It is possible to design sites that don’t require hacks on the majority of platforms, (most of my designs are made to work on IE6 as well as modern browsers with no workarounds), but occasionally you do need to, and this is my way of doing so.