Version Vectors
A version vector refers to Windows Internet Explorer’s internal version number, which is stored in a registry key read on a browser start-up. A Web developer can use the version vector to detect which browser a viewer is using to view a Web site. Understanding the best practices for browser detection ensures that your site continues to operate as intended when viewed by Windows Internet Explorer 8 clients.
This document will explain how Windows Internet Explorer uses the value of version vector. Also, some example code will be given to assist Web developers with implementing and maintaining recommended browser detection practices.
How Windows Internet Explorer Uses the Version Vector
Besides using the version vector to populate its Help ->About section, Windows Internet Explorer uses this value when processing conditional comments. Conditional comments are blocks of comments in the HTML source of a page, interpreted only by Windows Internet Explorer. The comments may contain one or more operations, features, or values.
<!--[if gte IE8]>
For example, the above code shows the comment code required to check for Windows Internet Explorer Version 8 and above. The greater-than-or-equal comparison is used to ensure that the condition is ready for future versions of Windows Internet Explorer so that you won’t have to update the code if a new version is released.
The version vector also includes the minor browser version. When testing the major browser version number, the version vector is an 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 Windows Internet Explorer 5.5 is 5.5002.
<!--[if gte IE 5.5002]><p>You are using IE 5 or higher</p><![endif]-->
This code example shows the comment code required to check for the major browser version as well as the minor browser version. This allows you to further fine tune your conditions.
The 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. These are called downlevel-hidden since any browser or browser version that does not support conditional comments will ignore these comments and the markup between the tags. Conditional comments without the hyphens are called downlevel-revealed, since the comments will be ignored by downlevel browsers, but the markup between the tags will be processed.
<![if lt IE 5.5]><p>You are using earlier than IE 5.5 or another downlevel browser</p><![endif]>
This code example shows the comment code required to check for the major browser version as well as the minor browser version. This allows you to further fine tune your conditions.
Browser Detection Using the Version Vector
Use of conditional comments involves targeting different Cascading Style Sheets (CSS) rules for specific versions of Windows Internet Explorer. This will allow you to ensure that Windows Internet Explorer 8 clients do not receive CSS fix-ups and changes designed for Windows Internet Explorer 7. You can also use the user-agent string to detect the browser version. Table 1 contains a list of available features, operators, and/or values you can use to build your conditional comments.
Table 1
Item |
Example |
Comment |
IE |
[if IE] |
The only currently supported feature is the string "IE", corresponding to Windows Internet Explorer. |
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. |
! |
[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 8] |
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. |
true |
[if true] |
Always evaluates to true. |
false |
[if false] |
Always evaluates to false. |
The following example shows the use of conditional comments to determine which version of Windows Internet Explorer is being used and the appropriate CSS style sheet to send.
<head>
<title>Test Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<!--[if gte IE 8]>
<linkrel="stylesheet" type="text/css" href="/stylesheets/standards.css" />
<![endif]-->
<!--[if IE 7]>
<linkrel="stylesheet" type="text/css" href="/stylesheets/ie.css" />
<![endif]-->
</head>
Additionally, if you want to use the same style sheet for versions of Windows Internet Explorer 7 and above, you could use the following example code.
<head>
<title>Test Page</title>
<!--[if gte IE 7]>
<linkrel="stylesheet" type="text/css" href="/stylesheets/ie.css" />
<![endif]-->
</head>
Notice that the above code examples use greater-than-or-equal comparisons. This ensures that the code is ready for future versions of Windows Internet Explorer so that you won’t have to update it if a new version of Windows Internet Explorer is released. Following are some more examples of various condition statements.
<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
<![if !IE]><p>You are not using an uplevel Internet Explorer version.</p><![endif]>
<!--[if IE 8]><p>Welcome to Internet Explorer 8!</p><![endif]-->
<!--[if !(IE 8)]><p>You are not using Internet Explorer8.</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]-->
For more information regarding conditional comments and version vectors, read About Conditional Comments.
Other Browser Detection Techniques
The user-agent string is a browser’s identity as reported to Websites via HTTP traffic. You can use the user-agent string instead of, or in addition to, version vectors to detect the browser being used to view the Web site. For more information about user-agent strings and how to use them to detect browser versions, read What Will Windows Internet Explorer Report as the User-Agent String.
One advantage of using conditional comments is that they do not require scripting, 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.