Recipe 11.7. Setting Up an Intelligent Hack Management System

Problem

You want to develop a system to separate correct CSS rules from those used for hacks or workarounds.

Solution

Link a style sheet to a web page:

<link rel="stylesheet" type="text/css" media="screen, presentation" href="/_assets/css/screen/screen.css" />

Within the screen.css style sheet import the base style sheet that contains correct values:

@import url(csscookbook.css);

Then use a set of filters to import CSS rules needed to correct a browser's problems (see Figure 11-4). One such browser that would need its own style sheet could be Internet Explorer 5.x for Windows. Use the Mid Pass Filter to serve the style sheet to just that browser:

@import url(csscookbook.css); /* Styles for Internet Explorer 5 for Windows */ @media tty {  i{content:"\";/*" "*/}} @import 'winie5.css'; /*";} }/* */

Another browser that may need its own style sheet could be Internet Explorer for Macintosh. Use the Mac Band Pass Filter to serve a style sheet to just that browser:

@import url(/_assets/css/csscookbook.css); /* Styles for Internet Explorer 5 for Windows */ @media tty {  i{content:"\";/*" "*/}} @import '/_assets/css/winie5.css'; /*";} }/* */ /* Styles for Internet Explorer for Macintosh */ /*\*//*/
   @import "ie5mac.css";
 /**/

Figure 11-4. A diagram of the intelligent hacking system

Discussion

Keeping style sheets separated based on their browser support has a couple of benefits. First, it keeps the base style sheet clean of any hacks and workarounds.

Second, keeping hacks and workarounds specific to each browser in their own file means that you can easily delete the CSS rules if the time comes to stop supporting that particular browser.

For a listing of CSS filters that target specific browsers, see http://www.centricle.com/ref/css/filters/.

The technique discussed in the solution uses CSS-based hacks to deliver style sheets. Another approach is to user a server-side solution. Mark Pilgrim, a web developer, devised a solution based on mod_rewrite in the Apache server.

By detecting the browser's HTTP user agent, each browser gets its own style sheet in addition to the base style sheet. For more information about this technique, see http://diveintomark.org/archives/2003/01/16/the_one_ive_never_tried.

See Also

Molly Holzschlag's article on hack management at http://www.informit.com/articles/printerfriendly.asp?p=170511.