HyperText Markup Language/Conditional Comments

From Wikibooks, open books for an open world
< HyperText Markup Language
Jump to: navigation, search

Conditional comments are a proprietary extension to Microsoft Internet Explorer for Windows (IE/win) version 5.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[edit]

An 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 PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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[edit]

Conditional 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[edit]

These tests for conditional comments on Position is Everything may help you understand the quirks of conditional comments.