It is common for web developers to include some type of component to help figure out what type of browser and version of the browser is being used by the visitor while accessing your website. In some cases, you may simply want to target Internet Explorer (IE) browsers or specific versions of IE browsers.
You can accomplish this using different techniques, but implementing Conditional Comments is an easy way to detect IE versions 5-9. While using Conditional Comments may not offer a full solution for browser detection, it surely makes it easy to detect earlier versions of Windows Internet Explorer.
For example, you can use Conditional Comments to have the browser load different Cascading Style Sheets (CSS) rules, or run different blocks of JavaScript code.
Basic Structure of the Conditional Comment
Conditional Comments use the same basic structure as an HTML comment <!-- -->. For this reason, all other browsers will interpret them as normal comments and will ignore the content within the comment.
However, Internet Explorer versions 5-9 will recognize the special syntax within the comment and parse the content as if were normal web page content.
<!--[if IE]>
++ Instructions for Windows Internet Explorer Browsers ++
<![endif]-->Example
Here is a list of example syntax used to target IE, specific versions of IE as well as non-IE.
| Item | Description |
|---|---|
[if IE] | If Internet Explorer |
[if !IE] | If Not Internet Explorer |
[if IE 6] | If Internet Explorer version 6 |
[if lt IE 7] | If less than Internet Explorer version 7 |
[if lte IE 8] | If less or equal to Internet Explorer version 8 |
[if gt IE 7] | If greater than Internet Explorer version 7 |
[if gte IE 8] | If greater or equal to Internet Explorer version 8 |
[if (gt IE 6)&(lt IE 9)] | If greater than version 6 and less than version 9 of Internet Explorer |
[if (IE 8)|(IE 9)] | If version 8 or version 9 of Internet Explorer |
Online Demo
Here is a listing of Conditional Comments. Take a look just after this listing to see which Conditional Comments were parsed by your browser. Try accessing this page with both IE and non-IE browsers to compare the results.
<div id="ieConditionalComments">
<!--[if IE]>
This Conditional Comment is for IE.
<![endif]-->
<!--[if IE 6]>
This Conditional Comment is for IE 6.
<![endif]-->
<!--[if IE 7]>
This Conditional Comment is for IE 7.
<![endif]-->
<!--[if IE 8]>
This Conditional Comment is for IE 8.
<![endif]-->
<!--[if IE 9]>
This Conditional Comment is for IE 9.
<![endif]-->
<!--[if gt IE 6]>
This Conditional Comment is for IE 6 or later.
<![endif]-->
<!--[if lt IE 9]>
This Conditional Comment is for less than IE 9.
<![endif]-->
<!--[if lte IE 8]>
This Conditional Comment is for less than or equal to IE 8.
<![endif]-->
<!--[if (gte IE 6)&(lte IE 9)]>
This Conditional Comment is for IE greater than or equal to 6 and less than or equal to 9.
<![endif]-->
<!--[if !IE]> -->
This Conditional Comment is for non IE browsers.
<!-- <![endif]-->
</div>Results
Here are the results of the Conditional Comments listed above. If you are visiting this page with an IE browser pre-IE 10, you should have a few statements listed in the following container.
This Conditional Comment is for non-IE browsers.Conditional Comments for IE 10?
So here is the bad news… Support for Conditional Comments has been removed in Internet Explorer 10 for improved interoperability and compliance with HTML5. IE 10 browsers will treat Conditional Comments as regular comments, just like in other non-IE browsers.
This change will most definitely impact pages written specifically targeting Windows Internet Explorer browsers. However, the good news is that you can continue to use other techniques that you may already be using for non-IE browser detection.
