CSS Conditional Comments for Internet Explorer (IE)

Conditional comments are Internet Explorer specific mark-up that allows developers to target all versions of Internet Explorer from IE 5 and above as well as allowing pin pointing specific versions.

The basic conditional comment structure is as follows:

<!–[if IE 7]>
  <p>This will only be showed in Internet Explorer 7.</p>
<![endif]–>

Notice as there are comment tags <!– –> wrapping the text content, all other browsers will ignore this, however, IE has been specifically developed to pick up on these tags and there reacts to the conditional statement within side them.

the code

The basic structure allowing developers to target specific versions is as follows:

<!–[if IE]>
  <p>This will be displayed in all versions of Internet Explorer from 5 and above. </p>
<![endif]–>

<!–[if IE 5]>
  <p>This will be displayed in versions of Internet Explorer 5. </p>
<![endif]–>

<!–[if IE 5.0]>
  <p>This will be displayed in Internet Explorer 5.0. </p>
<![endif]–>

<!–[if IE 5.5]>
  <p>This will be displayed in Internet Explorer 5.5. </p>
<![endif]–>

<!–[if IE 6]>
  <p>This will be displayed in versions of Internet Explorer 6. </p>
<![endif]–>

<!–[if IE 7]>
  <p>This will be displayed in versions of Internet Explorer 7. </p>
<![endif]–>

Now getting slightly more complex we can target greater than and less than statements.

<!–[if lt IE 7]>
  <p>This will be displayed in all versions of Internet Explorer from 6 downwards.  The "lt" in this statement means "less than"</p>
<![endif]–>

<!–[if gt IE 6]>
  <p>This will be displayed in all versions of Internet Explorer greater than IE 6.  The "gt" in this statement means "greater than"</p>
<![endif]–>

<!–[if lte IE 7]>
  <p>This will be displayed in all versions of Internet Explorer from 7 downwards.  The "lte" in this statement means "less than or equal to"</p>
<![endif]–>

<!–[if gte IE 6]>
  <p>This will be displayed in all versions of Internet Explorer from 6 upwards.  The "gte" in this statement means "greater than or equal to"</p>
<![endif]–>

Finally a not statement can be used to determine whether the version being used is not the version stated and is coded as follows:

<![if !IE 5]>
  <p>This is not Internet Explorer 5</p>
<![endif]>

when should I use conditional statements?

Well I am a firm believer that they should be used as sparingly as possible. They should always be considered to be a last resort due to the possible difficulties in maintaining sites with conditional comments and the general messiness it adds to the code and that’s not even considering the fact that your code should be good enough to cope without having to use comments to alter specific versions of IE.

Conditional comments in my opinion are mainly used to load in different versions of stylesheets depending on which version of IE is viewing the page due to the cross browser compatibility of CSS. An example of this is as follows:

<!–[if IE 6]>
  <link rel="stylesheet" href="styles_ie6.css" type="text/css" media="screen" />
<![endif]–>

demo

Please see the conditional comments demo.

Well that’s about it. Not much to know really. Let me know what you think…