HyperText Markup Language/Conditional Comments
Conditional comments are a proprietary extension to Microsoft Internet Explorer for Windows (IE/win) version 4.0 and later. They are not available in Internet Explorer for Mac (IE/mac). They are a very useful way of handling the CSS bugs in the various versions of Internet Explorer.
Syntax
editAn ordinary (X)HTML comment looks like this:
<!-- This text will be ignored by the browser. -->
Conditional comments add additional syntax to comments. The simplest example is:
<!--[if IE]> This text will be shown by IE/win ver. 5.0 and higher. <![endif]-->
Browsers that don't understand the conditional comment syntax will process this as a normal comment, i.e. the content of the comment will be ignored.
Specific versions of IE/win can be targeted by changing the expression after the if. For example to target any version of IE/win with a major version of 5 use:
<!--[if IE 5]> The major version number of this browser is 5. <![endif]-->
The text will display in IE/win versions 5.0 and 5.5.
To target a specific version number, e.g. 5.0, the syntax is slightly quirky.
<!--[if IE 5.0]> You are using IE/win 5.0. <![endif]--><!--[if IE 5.5000]> You are using IE/win 5.5. <![endif]--><!--[if IE 6.0]> You are using IE/win 6.0. <![endif]-->
Inequalities can be used in the expression by placing an operator before the IE. The operators are:
lt- less than (but at least version 5.0 which is the lowest version supporting conditional comments)
lte- less than or equal (but at least version 5.0 which is the lowest version supporting conditional comments)
gt- greater than
gte- greater than or equals
Example:
<!--[if gte IE 6]> This text will be shown by IE/win ver. 6.0 and higher. <![endif]-->
All the expressions can be negated by prefixing with !, e.g.
<!--[if !gte IE 6]> This text will be shown by verions of IE/win ver. below 6 that support conditional comments. <![endif]-->
<!--[if !IE]> This text will be not be shown by any version of IE/win that understands conditional comments. It won't be shown by any other browsers either because they will treat this as a normal comment. <![endif]-->
The second example may seem pointless but with a small tweak you can arrange to hide text from IE/win version 5 and above.
<!--[if !IE]>--> This text will be not be shown by any version of IE/win that understands conditional comments. It will be shown by other browsers because they will treat this as text sandwiched between two normal comments. <!--<![endif]-->
The following HTML document is a working example.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Conditional comments</title>
</head>
<body>
<!--[if !IE]>-->
<p>This is page is not being viewed with Internet Explorer for Windows version 5.0 or higher.</p>
<!--<![endif]-->
<!--[if IE]>
<p>This is page is being viewed with Internet Explorer for Windows version 5.0 or higher.</p>
<![endif]-->
</body>
</html>
Use with CSS
editConditional comments can be used to pass additional stylesheets to IE/win. These stylesheets can provide fixes to layout bugs in IE/win. The basic idea is:
<head>
<title>Conditional comments</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="bugFixForIE5x.css">
<![endif]-->
</head>
External links
editThese tests for conditional comments on Position is Everything may help you understand the quirks of conditional comments.