About conditional comments
While many websites use feature detection to ensure their sites provide different experiences for browsers of different capabilities, some legacy websites use other techniques, such as the use of script on the server or client, to detect the browser.Here we introduce conditional comments, which offer advantages over scripted browser detection techniques. Conditional comments make it easy to detect earlier versions of Windows Internet Explorer. Conditional comments are the preferred means of differentiating Cascading Style Sheets (CSS) rules intended for specific versions of Internet Explorer.
Important As of Internet Explorer 10, conditional comments are no longer supported by standards mode. Use feature detection to provide effective fallback strategies for website features that aren't supported by the browser. For more info about standards mode, see Defining Document Compatibility.
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
- Examples
- Related topics
Terminology
As you continue to learn about document compatibility, it's helpful to be familiar with the following terms.
| Term | Description |
|---|---|
| expression | A combination of operators, features, and/or values used to form a conditional statement. |
| downlevel browser | Any browser except Microsoft Internet Explorer 5 and later versions. For the purposes of this article, downlevel refers specifically to any browser or browser version that doesn't 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. |
Benefits of using conditional comments
Here's a list of advantages that conditional comments have over scripting methods to determine the browser you're using.
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 aren't parsed, downloaded, or rendered. This saves client machine resources.
No script required.
Conditional comments don't require scripting and DHTML, and when no scripting is used in a webpage, no scripting engine needs to be loaded. Conditional comments are processed during the downloading and parsing phase, so only the content that's 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 understand and maintain. 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 isn't restricted to Internet Explorer alone. Conditional comments can be used to customize content delivered to browsers that support conditional comments and those that don't.
Syntax of conditional comments
The basic syntax of each type of comment is shown in this table. The first comment shown is the basic HTML Comment, which is included for comparison and to show the different syntax used by each type of conditional comment.
| Comment type | Syntax or possible value |
|---|---|
| standard HTML comment | <!-- Comment content --> |
| downlevel-hidden | <!--[if expression]> HTML <![endif]--> |
| downlevel-revealed | <![if expression]> HTML <![endif]> |
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.
The conditional expression is formed from a combination of feature, operator, and/or value, depending on the feature. This table shows the supported features and describes the values each feature supports.
| Item | Example | Comment |
|---|---|---|
| IE | [if IE] | The string "IE" is a feature corresponding to the version of Internet Explorer used to view the webpage. |
| value | [if IE 7] | An integer or floating point numeral corresponding to the version of the browser. Returns a Boolean value of true if the version number matches the browser version. For more info, see Version Vectors. |
| WindowsEdition | [if WindowsEdition] | Windows Internet Explorer 8 on Windows 7. The string "WindowsEdition" is a feature corresponding to the edition of Windows used to view the webpage. |
| value | [if WindowsEdition 1] | An integer corresponding to the edition of Windows used to view the webpage. Returns a Boolean value of true if the value matches the edition being used. For info about supported values and the editions they describe, see the pdwReturnedProductType parameter of the GetProductInfo function. |
| true | [if true] | Always evaluates to true. |
| false | [if false] | Always evaluates to false. |
This table describes the operators you can use to create conditional expressions.
| Item | Example | Comment |
|---|---|---|
| ! | [if !IE] | The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression. |
| lt | [if lt IE 5.5] | The less-than operator. Returns true if the first argument is less than the second argument. |
| lte | [if lte IE 6] | The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument. |
| gt | [if gt IE 5] | The greater-than operator. Returns true if the first argument is greater than the second argument. |
| gte | [if gte IE 7] | The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument. |
| ( ) | [if !(IE 7)] | Subexpression operators. Used in conjunction with Boolean operators to create more complex expressions. |
| & | [if (gt IE 5)&(lt IE 7)] | The AND operator. Returns true if all subexpressions evaluate to true |
| | | [if (IE 6)|(IE 7)] | The OR operator. Returns true if any of the subexpressions evaluates to true. |
Downlevel-hidden conditional comments
This 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. Because content is effectively hidden from browsers that don't 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.
This next sample shows 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>
alert("Congratulations! You are running Internet Explorer 7 or a later version of Internet Explorer.");
</script>
<p>Thank you for closing the message box.</p>
<![endif]-->
In the preceding example, only the major digit of the browser version is compared because it is the only digit specified in the conditional expression. To compare both major and minor version numbers, specify both digits. For more info and examples about specifying the browser's version number, see Version Vectors.
Downlevel-revealed conditional comments
The downlevel-revealed conditional comment enables you to include content in browsers that don't recognize conditional comments. Although the conditional comment itself is ignored, the HTML content inside it is not. Internet Explorer 5 and later versions also parse and render the content if the conditional expression evaluates to true. The downlevel-revealed conditional comment complements the downlevel-hidden conditional comment.
The following snippet shows a typical downlevel-revealed conditional comment.
<![if lt IE 8]>
<p>Please upgrade to Internet Explorer version 8.</p>
<![endif]>
When comparing this type of comment to the basic HTML Comment, notice that there are no hyphens ("--") immediately after the opening "<!" or immediately before the closing ">" of the comment block; therefore, the comment delimiters are treated as unrecognized HTML. Because the browser doesn't recognize the downlevel-revealed conditional comment, it does nothing with it.
Version vectors
Conditional expressions can be used to determine the version of the browser used to view a webpage or the edition of Windows used to run the browser. In both cases, the value of the expression is called a version vector and must be specified correctly to obtain the desired result.
When detecting the version of the browser, the major browser version is specified as integer. To check for a minor browser version, follow the version vector by a decimal point and four digits. For example, the version vector for the release build of Microsoft Internet Explorer 5.5 is 5.5000.
In the following example, only the major version number is specified; therefore, the sample evaluates as true for both Internet Explorer 5 and Internet Explorer 5.5.
<!--[if IE 5]>
<p>Welcome to any incremental version of Internet Explorer 5!</p>
<![endif]-->
The following test correctly identifies Internet Explorer 5.
<!--[if IE 5.0000]>
<p>Welcome to Internet Explorer 5.0!</p>
<![endif]-->
Note Internet Explorer 5, which shipped with Windows 2000, has a version vector equal to 5.0002. Therefore, the conditional expression [if lte IE 5.0000] returns false when evaluated in the release build of Internet Explorer 5.
In Internet Explorer 8 on Windows 7, when detecting the edition of Windows, the version vector is an integer corresponding to one of the values supported by the pdwReturnedProductType parameter of the GetProductInfo function.
<!--[if WindowsEdition 1]>
<p>You are using Windows Ultimate Edition.</p>
<![endif]-->
If you develop add-ons, you can use custom version vectors to provide version information to webpages. To define a custom version vector, add a REG_SZ value to the Version Vector Registry key. The name of the new key defines the feature value to use in a conditional comment, as shown here.
HKEY_LOCAL_MACHINE
Software
Microsoft
Internet Explorer
Version Vector
Contoso = 0.9
The previous example uses a custom version vector to indicate that a pre-release version (0.9) of the fictional Contoso control is installed on a user's computer. This next example shows how a conditional comment might use this information.
<!--[if lt Contoso 2]>
<p>Your version of the Contoso control is out of date; Please update to the latest.</p>
<![endif]-->
Examples
Here are some more examples of conditional comments.
<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>
<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->
<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->
<!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->
<![if false]>You are using a <em>downlevel</em> browser.<![endif]>
<!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->
Related topics
Cascading Style Sheet Compatibility in Internet Explorer 7
HTML Comment Object