WEB STANDARDS CREATIVITY

56
As with our IE5/Mac-specific CSS file, these two @import
rules bring in external style sheets that patch bugs in different
versions of IE/Windows: the first is for all versions of
Internet Explorer on Windows, and the second is seen only
by IE5/Windows. Even better, every other non-IE browser on
the planet is oblivious to these browser-specific workarounds,
since these conditional comments are seen as regular
HTML comments by standards-compliant browsers. As
a result, the link to patches-ie.css is essentially invisible to
most browsers and handily parsed by IE/Windows.
At this point, you’re likely wondering (read: “screaming
furiously at the ceiling”) why you should bother to fork
your CSS like this. Why link to two separate style sheets,
which only exist to @import other CSS files, some of which
are filled with nothing but workarounds for different
browser-specific CSS bugs? (See Figure 3-3.)
As you might be aware, you have any number of ways to
insert browser-specific CSS patches alongside your other
Figure 3-3. Our CSS architecture
CSS rules (see http://cssdiscuss.incutio.com/?page=
CssHack for a few examples). While keeping your CSS all
in one file only leaves you one CSS file to worry about,
tracking down and updating fixes for individual browsers
can quickly become a nightmare. With the multiple style
sheets approach, you can intelligently quarantine CSS
patches into browser-specific style sheets, which will
make future updates a breeze. And what happens when
you stop supporting a browser? Well, instead of searching
through more than 2,000 lines of a style sheet for every
IE5/Mac hack you wrote into your main CSS file, you can
simply delete the @import reference to that browser’s
CSS patches in one of the linked style sheets. ’Nuff said.
With this hack management framework in place, we can
now start in on the interesting stuff: applying some basic
style to our document’s markup. Yes, I realize that it’s
about darn time.
The approach outlined here was inspired by Molly Holzschlag’s excellent article, “Integrated Web
Design: Strategies for Long-Term CSS Hack Management” (www.informit.com/articles/article.
asp?p=170511&rl=1). Written nearly two years ago, the article reads as well today as it did when it was first
published. Read it, bookmark it, rinse, repeat.