Conditional comments

Conditional comments are proprietary code that’s only understood by Microsoft browsers
from version 5 onward, but as they’re wrapped up in standard HTML comments, they
don’t affect other browsers, and they are also considered perfectly valid by the W3C’s validation
services. What conditional comments enable you to do is target either a specific
release of Internet Explorer or a group of releases by way of expressions. An example of a
conditional comment is shown in the following code block:
<!--[if IE 6]>
[specific instructions for Internet Explorer 6 go here]
<![endif]-->
Anything placed inside this comment will only be shown in Internet Explorer 6—all other
browsers ignore the content. This is most useful for adding IE-specific style sheets to a web
page, within which you can place overrides. For example, rather than using the box model
hack shown earlier in the chapter, you would have a clean style sheet, and then override
specific values in a separate style sheet for Internet Explorer 5.x, attached within a conditional
comment.
Generally, problems with Internet Explorer fall into the following camps: rare issues with
Internet Explorer 7, problems that affect versions 6 and below, and problems that specifically
affect version 5.x. With that in mind, I mostly add three IE-specific style sheets to my
web pages, with the newest release at the top. Conditional comments are generally added
after the “default,” or clean, style sheets (which in this case are the main style sheet
added using a style element, and a print style sheet added using a link element).
<style type="text/css" media="screen">
/* <![CDATA[ */
@import url(x.css);
/* ]]> */
</style>
<link rel="stylesheet" rev="stylesheet" href="x-print.css"
å type="text/css" media="print" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie-7-hacks.css"
å media="screen" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie-6lte-hacks.css"
å media="screen" />
<![endif]-->
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="ie-5-hacks.css"
å media="screen" />
<![endif]-->
Within the comments, lte IE 6 means “less than or equal to Internet Explorer 6,” so anything
added to ie-6lte-hacks.css affects Internet Explorer 6 and below; lt IE 6 means
“less than Internet Explorer 6,” so anything added to ie-5-hacks.css affects versions of
Internet Explorer below 6. An alternate way of attaching a style sheet for Internet Explorer
5 would be to use the syntax if IE 5. Since the cascade still affects the rules within style
sheets attached inside conditional comments, it makes sense to fix things for Internet
Explorer 6 and below first, and then work backward to Internet Explorer 5.x to fix the few
remaining things that need sorting out.
Note that the preceding code block also includes a link to a print style sheet—print style
sheets are covered in Chapter 10.
Let’s now examine the example from earlier, which has the following code hack to deal
with the box model issues that affect versions of Internet Explorer below 6:
.box {
padding: 20px;
width: 340px;
voice-family: "\"}\"";
voice-family: inherit;
width: 300px;
}
When using conditional comments, you’d make the rule in the default style sheet clean,
with no hacks:
.box {
padding: 20px;
width: 300px;
}
You’d then add a rule to your style sheet that only Internet Explorer versions below 6 can
see (the one within the conditional comment that references lt IE 6 in the large code
block shown earlier).
.box {
width: 340px;
}
Compliant browsers read the rule in the clean style sheet. Internet Explorer versions below
6 then override the width value, thereby displaying the box as intended. Unlike when
using a CSS hack, however, the CSS hasn’t been compromised in any way. The majority of
problems detailed in the “Common fixes for Internet Explorer” sections later in the chapter
are to do with CSS, and therefore require conditional comments when they’re being
dealt with.