Conditional comment

From Wikipedia, the free encyclopedia

Conditional comments is a mechanism for HTML authors to take advantage of features of some browsers while gracefully degrading the functionality for browsers which do not support the features without the need to use server side scripting such as ASP or PHP. Conditional comments first appeared in Microsoft's Internet Explorer 5 browser and is supported through at least version 7.[1]

Conditional comments can be used to hide certain styles from a specific browser, or even to supply a tailored style sheets for individual browser versions.

There are two types of conditional comments, downlevel revealed which is a proprietary Microsoft HTML tag and downlevel hidden which are ignored by non Microsoft browsers because they are treated as a standard comment.

Contents

[edit] Examples

Here is a simple example that demonstrates how conditional comments work.

<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<![if !IE]>
<p>You are not using Internet Explorer.</p>
<![endif]>

[edit] Downlevel-hidden conditional comment

Below is an example of a "downlevel hidden" conditional comment:

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

or

<!--[if lte IE 7]>
<style>
some css tags
</style>
<![endif]-->

This tag will let IE 7 read the specified CSS file while IE 6 or less will ignore it. Browsers other than IE will also ignore it because it looks like a standard HTML comment. With different uses of this tag you can also single out IE 6, IE 5, or versions of IE that are greater or lesser than a specified version.

[edit] Downlevel-revealed conditional comment

Below is an example of a "downlevel revealed" conditional comment:

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

This is recommended by Microsoft for when the content should be exposed to non-IE browsers.

Microsoft acknowledges this method is not standardized markup for comments[1], intending these tags to be overlooked by other browsers and expose the content in the middle. Some web developers use an alternative technique[2] for downlevel-revealed conditional comments in order to only use standardized markup.

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

Adding the dashes before and after each if statement tag completes them as a valid HTML comment and leaves center code open to rendering on non-IE browsers.

While this method is functional in current versions of Internet Explorer, there is no guarantee that future versions will continue to operate this way.

Note: Internet Explorer 4 and below do not support conditional comments.

[edit] Conditional Comment in JScript

Starting with Internet Explorer 4, there exists a similar proprietary mechanism for adding conditional comments within JScript. By Microsoft this is referred to as Conditional Compilation.

Code example:

<script type="text/javascript">
/*@cc_on
  document.write("You are using IE4 or higher");
@*/
</script>


[edit] References

  1. ^ About Conditional Comments. Microsoft Corporation.