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 script on the server or client.

This article introduces conditional comments, which offer certain advantages over scripted browser detection techniques. Conditional comments make it easy for developers to take advantage of the enhanced features offered by Microsoft Internet Explorer 5 and later versions, while writing pages that downgrade gracefully in less-capable browsers or display correctly in browsers other than Windows Internet Explorer. Conditional comments are the preferred means of differentiating Cascading Style Sheets (CSS) rules intended for specific versions of Internet Explorer.

Conditional comments only work in Explorer on Windows, and are thus excellently suited to give special instructions meant only for Explorer on Windows. They are supported from Explorer 5 onwards, and it is even possible to distinguish between 5.0, 5.5 and 6.0.

Benefits of Using Conditional Comments

Conditional comments have certain advantages over scripting methods of browser detection.

* Low client-side impact.

When a downlevel browser encounters a downlevel-hidden conditional comment, the browser skips over the HTML inside the comment, and the content elements are not parsed, downloaded, or rendered. This saves client machine resources.

* No script required.

Conditional comments do not require scripting and DHTML, 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 is actually downloaded. Conditional comments can be combined freely with other browser detection techniques.

* Separate code from detection logic.

Using conditional comments, script logic can be separated into smaller and simpler segments of code, which are easier to maintain and understand. Plus, code segments are loaded only by the browser version for which they were intended.

* Cross-browser.

Conditional comments have been around since Internet Explorer 5, but their use is not restricted to Internet Explorer alone. Conditional comments can be used to customize content delivered to browsers that support conditional comments and those that do not.

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.
Comment type Syntax or possible value

standard HTML comment
downlevel-hidden
downlevel-revealed HTML

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 to indicate whether the content inside the comment block should be parsed or ignored.

downlevel browser : Any browser except Internet Explorer 5 and later versions. For the purposes of this article, downlevel refers specifically to any browser or browser version that does not support conditional comments.

uplevel browser : Internet Explorer 5 and later versions, which support conditional comments.

downlevel-hidden : A conditional comment block that is ignored by downlevel browsers. Internet Explorer 5 and later versions render the HTML content if the expression evaluates to true.
downlevel-revealed : A conditional comment block that is parsed by downlevel browsers. Internet Explorer 5 and later versions also render the HTML content if the expression evaluates to true.

Downlevel-hidden Conditional Comments

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

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


The downlevel-hidden conditional comment contains hyphens ("--") in the opening and closing tag, similar to the basic HTML Comment. The condition appears in the opening portion of the tag, and [endif] is placed prior to the closing portion of the tag. The content is placed inside the comment tags.

Because the first four characters and the last three characters of the comment are identical to a basic HTML Comment element, downlevel browsers ignore the HTML content inside the comment block. Since content is effectively hidden from browsers that do not support conditional comments, this type of conditional comment is called downlevel-hidden.

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

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 gte IE 7]>
<SCRIPT LANGUAGE="Javascript">

alert("Congratulations! You are running Internet Explorer 7 or greater.");

</SCRIPT>

<P>Thank you for closing the message box.<P>

<![endif]-->

Click here for more.

Conditional CSS

<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">

H1 {font-family:verdana}

</style>
<![endif]>
<![endif]-->

Target all versions of IE

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

Target ALL non-IE browsers

<! [if !IE]>
<link rel="stylesheet" type="text/css" href="non-ie.css" />
<![endif] >