About Conditional Comments

One of the most common operations performed in a Web page is to detect the browser type and version. Browser detection is performed to ensure that the content presented to the browser is compatible and renders correctly. The browser type can be detected using many different techniques. Most methods of browser detection make use of either server- or client-side script, and each have advantages and disadvantages. This article focuses on conditional comments, which offer an alternative to scripted browser detection. Conditional comments offer certain advantages over scripted browser detection techniques and are also easier to use.

Conditional comments have been available since Microsoft® Internet Explorer 5, but their use is not restricted to Internet Explorer. Examples are given that show how conditional comments can be used to customize the content delivered to both uplevel and downlevel browsers. Conditional comments make it easy for developers to write pages that downgrade gracefully in less capable browsers, while making it easy to take advantage of the enhanced features and performance offered by Internet Explorer 5 and later versions.

The following topics are discussed in this document.

• Terminology
• Benefits of Using Conditional Comments
• Syntax of Conditional Comments
• Downlevel-hidden Conditional Comments
• Downlevel-revealed Conditional Comments
• Version Vectors
• Related Topics

Terminology

The following terms are used frequently in this article.

Benefits of Using Conditional Comments

Conditional comments have certain advantages over scripting methods of browser detection. When a downlevel browser encounters a downlevel-hidden conditional comment, the browser does not see the inner HTML inside the comment, and the content elements are not downloaded and rendered. This saves both bandwidth and machine resources.

When using script to detect the browser type and version, a separate block of code is often written to implement each level of functionality and rendering being supported by the page. This is done because there are many differences in the scripting language and object models supported by different browsers. Using conditional comments, script logic can be separated into smaller and simpler segments of code, which are easier to maintain and understand.

It is not always necessary to use scripting and DHTML when working with conditional comments, and when no scripting is used in a Web page, no scripting engine needs to be loaded. Conditional comments are processed during the downloading and parsing phase, so only the content that is targeted for the browser loading the Web page is actually downloaded. Conditional comments can be combined freely with other browser detection techniques.

Syntax of Conditional Comments

The basic syntax of each type of comment is shown in the following table. The first comment shown is the basic HTML Comment, which is included for the purpose of comparison and to illustrate the different syntax used by each type of conditional comment.

The HTML Comment is recognized by practically every browser. With this type of comment, all the content inside the tag is completely ignored by the browser. The HTML shown inside the syntax block in each of the conditional comments denotes any block of HTML content, including script. Both types of conditional comment use a conditional expression, which is recognized in Internet Explorer 5 and later versions. If the expression is true, the content inside the comment block is parsed and rendered.

A combination of operators, values, and features can be used to form a conditional expression, as shown in the following table.

Downlevel-hidden Conditional Comments

The following sample shows a downlevel-hidden conditional comment, which contains a short paragraph of text.

<!--[if IE 5]>
<p>Welcome to Internet Explorer 5.</p>
<![endif]-->

At first glance the comment appears to be quite similar to a basic HTML Comment, but upon further examination there are some significant differences. The downlevel-hidden conditional comment has an opening and closing block in the tag, allowing for the insertion of HTML markup inside the comment. A conditional block is shown in the opening portion of the tag, and an [endif] block is placed in the closing portion of the tag. The HTML content is placed inside the comment.

Because the first four characters and the last three characters of the comment are identical to a basic HTML Comment, all downlevel browsers fail to recognize the conditional comment block, including all its HTML content. Downlevel browsers treat this as a regular HTML Comment. Therefore, any content inside the comment block is effectively hidden from the downlevel browser, hence the term downlevel-hidden conditional comment.

In Internet Explorer 5 and later versions, the conditional expression is recognized and evaluated. If the result of the Boolean expression is true, then the content inside the comment block is parsed and rendered by the browser. This behavior makes the downlevel-hidden conditional comment particularly useful for including content that has been specifically designed for Internet Explorer 5 and later versions.

The following sample illustrates how a client-side script block can be placed inside a conditional comment; in this case, a message is displayed in Internet Explorer 5 and later.

<!--[if IE 5]>
<SCRIPT LANGUAGE="Javascript">
alert("Congratulations. You are running IE5 or later!");
</SCRIPT>
<P>Thank you for closing the message box.</P>
<![endif]-->

This feature requires Microsoft® Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

For the attentive reader, something might seem to be inconsistent with this example. On the first line there's a conditional statement, [if IE 5], and yet the message box states "IE5 or later". In fact, the sample behaves identically for all versions of Internet Explorer 5. This is because only the major digit of the browser version is being compared in the conditional expression; none of the minor browser version indices (5.xxxx) have been specified and, therefore, the expression does not distinguish between minor browser versions. However, minor version indices can be used in a conditional comment expressions, enabling a more precise evaluation of the browser version. For further explanation and examples on specifying the browser's version number, see Version Vectors. Clearly, Internet Explorer 6 will not display the message box or the text content because the major version number is different.

When the sample is opened in some version of Internet Explorer 5, the script block is downloaded, parsed, and the dialog message is displayed. When running the sample, the parsing and rendering of the page is halted until the message box is closed, after which the rest of the page is loaded. All downlevel browsers ignore the entire script block and treat the entire comment, including any HTML content, as a single HTML Comment.

From this section, it can be seen that the downlevel-hidden conditional comment is useful for hiding content from downlevel browsers and that it can also be used to deliver content in Internet Explorer 5 and later versions.

Downlevel-revealed Conditional Comments

The downlevel-revealed conditional comment enables you to include content in downlevel browsers. The conditional expression controls whether Internet Explorer 5 and later download and render the content. The downlevel-revealed conditional comment is the complement of the downlevel-hidden conditional comment.

The following snippet shows a typical downlevel-revealed conditional comment.

<![if !IE 5]>
<p>Please upgrade to Internet Explorer version 5.</p>
<![endif]>

A downlevel browser does not recognize the downlevel-revealed conditional comment. Therefore, when it downloads this type of comment, it does nothing with it and then continues downloading and parsing the document. Downlevel browsers ignore this type of conditional comment, but they do not ignore the HTML content inside it, if any is present. In the preceding sample, the p tag is parsed and rendered by downlevel browsers.

In Internet Explorer 5 or later, the conditional comment is recognized and the expression is evaluated. If the conditional statement is evaluated as true then the content inside the conditional comment is parsed and rendered in Internet Explorer 5 and later. If the expression evaluates as false, the content inside of the comment is ignored.

Version Vectors

Conditional comment expressions are used to determine the type and version of the browser. Forming the right expression requires some care when using conditional comments, since the format of the version vector must be defined correctly in order to obtain the desired result.

The version vector syntax can be specified as an integer, in which case only the major browser version number is tested. In situations where an expression needs to check for a minor browser version, the version vector can be specified as an integer, followed by a decimal point, and then up to four more sequential digits. Therefore, a full length version vector appears to be identical to a floating point number with four decimal places, but it is not evaluated as a decimal. Clearly, this is important to keep in mind when forming expressions in conditional comments.

With decimal numbers the number 5.5 is equivalent to 5.5000. However, with a version vector each individual digit is compared separately. The version vector format supported in a conditional comments does not support the following format: 5.0.4.5.3. However, a version vector equal to 5.0453 would correspond to the preceding format, where each digit is compared separately.

When an expression is evaluated, a check is made against each numeral specified in the version vector. Therefore, the following sample evaluates as true for any version of Internet Explorer 5.

<!--[if IE 5]>
<p>Welcome to any incremental version of Internet Explorer 5!</p>
<![endif]-->

The reason for this evaluation is that only one digit, in this case the number 5, is specified. Since the major version number in both browsers is 5, the expression returns true. Applying the same logic, the following test returns the value false for Internet Explorer 5.5.

<!--[if IE 5.0]>
<p>Welcome to Internet Explorer 5.0!</p>
<![endif]-->

In conclusion, to check for a specific incremental version of a browser or if testing for a particular build of the browser, it can be necessary to define the full vector.

Related Topics

• HTML Comment
• comment