Did you find this useful?
Socialize it today.


Conditional Comments for Internet Explorer

Thursday, March 28, 2013

sitemap

It is common for web developers to include some type of component to help figure out what type of browser and version of 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 running 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.


ItemDescription
[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 definately impact pages written specifically targetting 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.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML CSS and JavaScript Editor Creating Web Pages Simplified HTML CSS: The Complete Reference