Conditional comments with IE

Conditional comments with IE

Since Internet Explorer 5, conditional comments have been used to show or hide extra content from Internet Explorer.

The syntax

The example below will add a CSS style sheet only if the browser viewing the page is IE6:

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

Any HTML that appears between the IF statement will be added to the document if viewed using the specified version of Internet Explorer.

You can use the following names to identify versions of Internet Explorer:

Name	Description
IE	All versions of Internet Explorer less than version 10
IE 5, IE 6, IE 7, IE 8, IE 9	Only the version mentioned

You can also use the following modifiers:

Name	Description
lt	All versions less than
lte	All versions less than or equal to
gt	All versions greater than
gte	All versions greater than or equal to

Expressions can be combined as follows:

Name	Example	Description
Not	!(IE 6)	Not Internet Explorer 6
And	(gt IE 6)&(lt IE 9)	Greater than Internet Explorer 6 and less than Internet Explorer 9
Or	(IE 7)|(IE 8)	Internet Explorer 7 or Internet Explorer 8

The following example will add some JavaScript to all versions of Internet Explorer less than version 8:

<!--[if lte IE 8]>
    <script type="text/javascript" src="ie.js"></script>  
<![endif]-->

Exclude Internet Explorer

As well as including code for Internet Explorer, you can also hide code from Internet Explorer:

<!--[if !IE]><!-->
    <div>You are not using Internet Explorer (less than version 10)</div>
<!--<![endif]-->

Notice the syntax difference when excluding Internet Explorer

Internet Explorer 10 does not support conditional tags, and behaves like other non-IE browsers

If-else statements

You can combine the comments to make if-else style statements:

<!--[if IE]>
    <div>You are using Internet Explorer (less than version 10)</div>
<![endif]-->
<!--[if !IE]><!-->
    <div>You are not using Internet Explorer, or using IE version 10</div>
<!--<![endif]-->