DM 171: Week Fifteen - IE Conditional Comments

IE: What is a web designer to do?

You've probably wrestled with Internet Explorer rendering bugs (features?) and the need for cross browser continuity. “Hacks” for IE can fix some problems but then become their own problems as Internet Explorer is updated; one solution is the use of Internet Explorer conditional comments to include IE specific styles or content.

It needs to be repeated though; whenever possible, design so that no hacks or special CSS fixes are needed.

IE Conditional Comment

Conditional comments are a proprietary Microsoft form of HTML comments that allow specific CSS and/or content to be targeted to Internet Explorer, discreet versions of IE, or non-IE browsers. These conditional comments work on Window’s Internet Explorer versions 5 and above. A simple example will illustrate the syntax:

<!--[if IE ]>
<p>Content for Internet Explorer</p>
<![endif]-->

  1. The conditional comment starts and ends with normal commenting convention (<!-- -->), non-IE browsers will ignore the entire statement.
  2. IE (Windows but not for Mac) recognizes the square brackets and the conditional statement “if IE” and parses the content for IE.
  3. IE then recognizes the “endif” statement and returns to normal parsing.

Notice the if/endif similarity with XSSI?

You may also target specific version of IE, here is an example:

<!--[if IE 7]>
<p>Content for Internet Explorer 7!</p>
<![endif]-->

By adding the version number, specific content can be targeted to that version. Even more specific “version vectors” may be used, proceed with caution so that you do not leave out versions you desire.

Other operators may be used as well:

  • [if !IE ] - The exclaimation point just before the feature (IE) or other operator is the NOT operator and is the reverse Boolean meaning of the expression, in this case, not IE. It must immediately preceed the operator with no spaces.
  • [if lt IE 7] - lt stands for less than
  • [if lte IE 7] - lte stands for less than or equal to
  • [if gt IE 5] - gt stands for greater than
  • [if gte IE 5] - gte stand for greater than or equal to
  • [if !(IE 7)] - ( ) surround subexpressions and allow more complex expressions
  • [if (gt IE 5)&(lt IE 7)] - The ampersand (&) is the AND operator which returns true if both subexpression are true.
  • [if (IE 6)|(IE 7)] - The pipe symbol (|) is the OR operator which returns true if either subexpression is true.

Uses for IE Conditional Comments

The most common usage for IE conditional comments is to send IE specific CSS styles to IE and not other browsers. According to Microsoft:

Conditional comments are the preferred means of differentiating Cascading Style Sheets (CSS) rules intended for specific versions of Internet Explorer.
http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx

The conditional comments may not be used within the CSS file but may be used with the link tag to pass on additional styles. The code in the head section of your page may look like this:

<link rel="stylesheet" type="text/css" href="general.css" />
<!--[if IE ]>
<link rel="stylesheet" type="text/css" href="ie_specific.css" />
<![endif]-->
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

And so on… The level of detail will depend on the project and its needs for IE version specific styles.

Resources

From Microsoft: About Conditional Comments - http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx

From CSSplay: Conditional comments for Internet Explorer AND non-IE browsers - http://www.cssplay.co.uk/menu/conditional.html

From Position Is Everything: Taming Your Multiple IE Standalones - http://www.positioniseverything.net/articles/multiIE.html