Internet Explorer (IE) Conditional Comments

IE Conditional Comments

Internet Explorer Conditional comments are conditional statements used only by Microsoft Internet Explorer in HTML source file. It gets frustrating when different versions of Internet Explorer displays web pages differently due to the browser problems. In some situations we cant avoid Internet Explorer because of various reasons such as our visitors are still using different versions of Internet Explorer. In these situation We typically use IE conditional comments to fix the IE issues.

Internet Explorer Conditional comments can be used to display and hide code to and from Internet Explorer. It uses a special syntax.

The If the statement evaluates to true, the enclosed HTML is rendered within the HTML document. If the statement evaluates to false, the enclosed HTML remains hidden from the user. Also noted that Conditional comments can be placed at any part of the HTML file at which normal comments can be located.

Examples:

ALL VERSIONS of Internet Explorer

<!--[if IE]>
  <p>Implement in ALL VERSIONS of IE</p>
<![endif]-->

EXCEPT Internet Explorer

<!--[if !IE]>
  <p>Implement in everything EXCEPT IE</p>
<![endif]-->

Internet Explorer 9 ONLY

<!--[if IE 9]>
  <p>Implement in IE 9 ONLY</p>
<![endif]-->

Internet Explorer 8 ONLY

<!--[if IE 8]>
<p>Implement in IE 8 ONLY</p>
<![endif]-->

Internet Explorer 7 ONLY

<!--[if IE 7]>
<p>Implement in IE 7 ONLY</p>
<![endif]-->

Internet Explorer 6 ONLY

<!--[if IE 6]>
<p>Implement in IE 6 ONLY</p>
<![endif]-->

Internet Explorer 5 ONLY

<!--[if IE 5]>
  <p>Implement in IE 5 ONLY</p>
<![endif]-->

Internet Explorer 7 or Below

<!--[if lt IE 7]>
  <p>Implment only in IE7 or Below</p>
<![endif]-->

Internet Explorer 6 or Greater

<!--[if gte IE 6]>
  <p>Implment only in IE6 or Greater</p>
<![endif]-->

Not Internet Explorer 6

<!--[if !IE 6]><!-->
  <p>Implment only in Not IE6</p>
<!--<![endif]-->

You can use operators within your expressions

Internet Explorer 6 or 7 only

<!--[if (IE 6)|(IE 7)]>
  <p>Implment only in IE6 or IE7</p>
<![endif]-->

greater than IE4 and less than IE7

This one use in the case of IE5 and IE6.

<!--[if (gt IE 4)&(lt IE 7)]>
  <p>Only in greater than IE4 and less than IE7</p>
<![endif]-->

Conditional comments in JScript

example

<script>
/*@cc_on
  document.write("You are using IE .. version or higher");
@*/
</script>

Detect Internet Explorer version using JScript

<script>
/*@cc_on
  @if (@_jscript_version > 10)
    document.write("You are using a version newer than IE10");
  @elif (@_jscript_version == 10)
    document.write("You are using IE10");
  @elif (@_jscript_version == 9)
    document.write("You are using IE9");
  @elif (@_jscript_version == 5.8)
    document.write("You are using IE8");
  @elif (@_jscript_version == 5.7 && window.XMLHttpRequest)
    document.write("You are using IE7");
  @elif (@_jscript_version == 5.6  (@_jscript_version == 5.7 && !window.XMLHttpRequest))
    document.write("You are using IE6");
  @elif (@_jscript_version == 5.5)
    document.write("You are using IE5.5");
  @elif (@_jscript_version < 5.5)
    document.write("You are using a version older than IE5.5");
  @else
    document.write("You are using an unknown version of IE");
  @end
@*/
</script>

You can use corresponding conditions in Cascade Style Sheets (CSS) also.

Some samples are given below

All browsers

#anyelement {
	color: #3B5998;
}

Internet Explorer 7 and aabove

#ie7andup #anyelement {
	color: #3B5998;
}

Internet Explorer 6 only

#ie6only #anyelement {
	color: #3B5998;
}

Internet Explorer 5.5 only

#ie5-5only #anyelement {
	color: #3B5998;
}