Recipe 11.5. Using Internet Explorer for Windows Conditional Comments to Deliver Styles

Recipe 11.5. Using Internet Explorer for Windows' Conditional Comments to Deliver Styles

Problem

You want to deliver specific code to different versions of Internet Explorer for Windows.

Solution

Use Microsoft's Internet Explorer conditional comments:

<!--[if IE]> <p>You are seeing this sentence because you are using an Internet Explorer  browser.</p> <![endif]-->

To deliver code to different versions of Internet Explorer for Windows, use the browser version number deliver code:

<!--[if IE 5]> <p>You are seeing this sentence because you are using Internet Explorer 5</p> <![endif]--> <!--[if IE 5.0]> <p>You are seeing this sentence because you are using Internet Explorer 5.0</p> <![endif]--> <!--[if IE 5.5]> <p>You are seeing this sentence because you are using Internet Explorer 5.5</p> <![endif]--> <!--[if IE 6]> <p>You are seeing this sentence because you are using Internet Explorer 6</p> <![endif]-->

To deliver code to version of Internet Explorer 5 for Windows and higher, use this code:

<!--[if gte IE 5]> <p>You are seeing this sentence because you are using Internet Explorer 5 and  up</p> <![endif]-->

To deliver code to version of Internet Explorer 5.5 for Windows and lower, use this code:

<!--[if lte IE 5.5]> <p>You are seeing this sentence because you are using Internet Explorer lower or  equal to 5.5</p> <![endif]-->

To deliver code to version of Internet Explorer for Windows below Internet Explorer 6, use this code:

<!--[if lt IE 6]> <p>You are seeing this sentence because you are using Internet Explorer lower  than 6</p> <![endif]-->

Discussion

Microsoft developed its own propriety comment system to deliver specific HTML code to different versions of its browser, Internet Explorer for Windows.

This code can only be used in placing HTML between the conditional statements. However, this still means that CSS rules can be specifically targeted through conditional comments. For example, to deliver a style sheet targeted for Internet Explorer 5.x, place a link tag to a style sheet between two conditional comments:

<link rel="stylesheet" type="text/css" media="screen, presentation" href="/_assets/css/screen/screen.css" /> <link rel="stylesheet" type="text/css" media="aural"  href="/_assets/css/aural.css" /> <!--[if lt IE 6]> <link rel="stylesheet" type="text/css" media="screen, presentation" href="/_assets/css/screen/ie.css" /> <![endif]-->

Also, embedded styles can also be placed in between conditional comments:

<!--[if lt IE 6]> <style type="text/css">  h1 {    font-family: Verdana, Arial, Helvetica, sans-serif;   font-size: 36px; } </style> <![endif]-->

Conditional Comments may be used in conjunction with an intelligent hacking system. See Recipe 11.7 for more information about setting up a hacking system.

Note that there is a difference between IE 5 and IE 5.0 when using conditional comments.

To isolate code for just Internet Explorer 5.0, use IE 5.0. To deliver code to all Internet Explorer versions within the major release of 5, use IE 5.

The markers lt and gt mean "less than" and "greater than," respectively. While lte and gte mean "less than or equals" and "greater than or equals."

See Also

The MSDN's article on conditional comments at http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp.