Hacks and Workarounds - Pro CSS Techniques - page 88

Keep Hacks Separated and Commented
So you built your site using web standards, validated all of them, and carefully applied a few
hacks to keep IE 6 in line. Then you realize that your layout breaks in IE 7, because the new
browser is being sent multiple (and often conflicting) rules between the hacks and rules previ-
ously intended for other browsers. This sort of epiphany can give a developer serious stomach
pains.
However, some forward-thinking web developers are not quivering at the sight of IE 7.
These smart folks use IE conditional comments to deliver separate style sheets to IE/Win
(sometimes even specific versions of IE), and in so doing, have saved themselves a lot of
trouble now that IE 7 is upon us.
IE Conditional Comments
Most of the time, proprietary browser features are considered a bad thing, but conditional
comments are one notable exception that, especially with the release of IE 7, we can be thank-
ful for.
Microsoft's special addition to IE (versions 5 and higher) allows you to use a specially for-
matted HTML comment ( <!-- comment here --> ) to send markup to (or hide it from) IE, while
other browsers ignore it completely.
There are a few ways you can use conditional comments to your advantage (for the com-
plete list, see http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp ),
but for our purposes we're interested in hiding our IE hacks from IE 7 (and future versions).
The conditional comment for this purpose looks like this:
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="css/IEhacks.css" />
<![endif]-->
The if statement at the beginning of the comment says, “If the version of IE is less than or
equal to 6, display the following markup,” thus preventing IE 7 or newer from reading the style
sheet containing our hacks.
Gotta Keep 'Em Separated
The key to success lies in confining hacks to separate style sheets specifically for hacks . Isolat-
ing CSS hacks makes them much easier to troubleshoot (simply comment out the <link> or
@import that loads the hack style sheet) and you can also remove them from your site entirely
in the future by just deleting the appropriate reference. So when the day finally comes when
you can stop supporting IE/Win versions 6 and older (and it will come, the prophets have
foreseen it!), you can gleefully erase all signs of those IE hacks from your site forever, without
having to search through your entire style sheet line by line. And even if you don't use IE con-
ditional comments (why wouldn't you?), your hacks are still separate from your primary styles,
and thus easier to maintain overall.
You Might Not Even Need a Hack!
The fewer hacks you employ, the better, and one benefit of using IE conditional comments is
that you can take advantage of source order within the cascade. By importing or linking your