Internet Explorer (IE) Conditional Comments

It's rather common that the same CSS styles are rendered differently among different browsers. Many times there is a difference between the way Netscape/Mozilla/Firefox browsers interpret CSS code and the way IE does. Opera seems to fall on either side depending on the property. Another problem that often arises is that different Javascript code must be written for different browsers.

Now with Javascript, unlike CSS, it's easy to check the type of browser and execute different code accordingly as I've explained before. However, it's sometimes more desirable to include different Javascript files depending on the browser especially when there is code that is specific to only IE. One viable solution for this is using the IE conditional comments.

Using IE conditional comments, one can include Javascript, CSS, and HTML that is only parsed if the user browser is IE or if it's not IE. If it is IE, you check even further and include the code if browser is a specific version of IE.

There are two types of conditional comments. One is called "downlevel-hidden," which is only parsed by IE because it uses special IE syntax. The second is called "downlevel-revealed," which is ignored by IE and parsed by everything else because it's not a standard HTML comment.

The downlevel-hidden syntax is as follows:

<!--[if IE]> Javascript/CSS/HTML <![endif]-->

As you can see the downlevel-hidden syntax uses standard "<!-- ... -->" HTML comment syntax.

Now the downlevel-revealed syntax is:

<![if !IE]> Javascript/CSS/HTML <![endif]>

Here we don't have the two dashes "--" after the "!" and before the ">".

The difference between downlevel-hidden and downlevel-revealed is that downlevel-hidden is parsed by IE when the condition is true and is never parsed by other browsers. Downlevel-revealed is always parsed by other browsers and is parsed by IE only when the condition is satisfied. So in both cases IE selectively executes but in downlevel-hidden other browsers never see the code and in downlevel-revealed they always parse it.

Here are some examples of what can be done with conditional comments from MSDN

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

<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->

<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->

<!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->
<![if false]>You are using a <em>downlevel</em> browser.<![endif]>

<!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->

Some of the CSS differences I've noticed is that the opacity property has no effect in IE but it works in Firefox and Opera. When word-wrap property with value of "break-word" is applied to hyperlinks (anchors) in Firefox, it does nothing but it works on IE and Opera.