WEB STANDARDS CREATIVITY

Structuring the CSS
Looking above the content area, you might notice two link elements in the head of the document: one for screen.css and
another for patches-ie.css. Inside our linked style sheet, screen.css, I’ve placed the following:
@import url("core.css");
/*\*//*/
@import url("patches-mac.ie5.css");
/**/
On the first line, the @import rule (www.w3.org/TR/CSS21/cascade.html#at-import) references another, external CSS file,
core.css. This style sheet contains the bulk of our CSS rules, free of any browser-specific style sheet patches. core.css is
seen by all browsers and contains our pure, hack-free style rules.
And speaking of hacks, this is exactly what the second @import statement is wrapped in. That odd-looking series of CSS
comments is in fact the IE5/Mac Band Pass Filter (www.stopdesign.com/examples/ie5mac-bpf), which prevents any browser
except Internet Explorer 5 (IE5) on the Macintosh from seeing the code therein. So now, with our semicloaked patchesmac.ie5.css
in place, we can place any style rules required to work around CSS bugs in that browser.
Why bother with this CSS-within-CSS approach? One of the benefits to this approach is ease of maintenance: by separating
this code out, we can make it much easier to remove these CSS “patches” if we ever need to stop supporting IE5/Mac. We
don’t need to sift through a few hundred lines of one style sheet—instead, we can quarantine these fixes in a separate file
altogether. Once we do need to discontinue support of that browser, we can simply delete that one @import statement in
our screen.css file, and it’s bye-bye to IE5.
Returning to our HTML template, we see that patches-ie.css is surrounded by some odd-looking comments:
These are known as conditional comments, and they’re an IE-only HTML extension that allows us to build programmatic
logic into our markup. We can serve up chunks of markup to specific versions of Internet Explorer on Windows, specifying
version numbers and other conditions within this special comment syntax.
Conditional comments are a proprietary, nonstandard extension to HTML, and as a result, they’ve been the
subject of no small amount of controversy over the years. You can find more information about conditional
comments on Microsoft’s website (http://msdn.microsoft.com/workshop/author/dhtml/overview/
ccomment_ovw.asp), as well on numerous industry blogs, such as mezzoblue (www.mezzoblue.com/
archives/ 2005/11/03/ie7_conditio).
Here, we’re using those conditional comments to hide our second link from versions of IE prior to version 7
(