IE7 Conditional Comments and XSL

About conditional comments

Conditional comments in Internet Explorer 7 are a way to ensure only IE or non-IE browsers parse certain parts of a page. This is mostly used to include CSS compatibility hacks by way of a <link> element in the page header, but they can in fact wrap any amount of HTML anywhere in the document.

There are two types of conditional comments, downstream-hidden and downstream-revealed.

downstream-hidden comments are visible to and parsed only by Internet Explorer. This is achieved by encapsulating them entirely within an HTML comment, for example:

<!--[if IE 7]>  ... some HTML code ...  <![endif]-->

(this example runs the code inside the comment if Internet Explorer 7 is the browser in use)

No non-IE browser will parse what’s inside the comment – becuase it’s a comment. IE browsers recognise this conditional comment syntax so will parse it.

downstream-revealed comments are visible both to Internet Explorer and other browsers. In the case of code that should only be executed by non-IE browsers, it is necessary for such browsers to be able to see the code. To do this, a specially crafted element is designed which relies on two key properties to work:

1. The element will be unrecognised by non-IE browsers, so nothing will be rendered for it, but any nested code will be rendered as per the standard behavioral design of web browsers.

2. IE will parse downstream-revealed conditional comments and prevent rendering if the condition criteria is to execute only in non-IE browsers.

A downstream-revealed conditional comment looks like this:

<![if !IE]>  ... some HTML code ...  <![endif]>

(this example runs the code inside the comment if the browser in use is not any version of Internet Explorer)

The net result of this is basically that you generally want to use downstream-hidden comments to enforce IE-specific behaviour and downstream-revealed comments to enforce non-IE-specific behaviour in other browsers.

The full syntax of conditional comments can be found in the MSDN Conditional Comments article.

Generating conditional comments in XSL

The syntax used for IE conditional comments is rather awkward to generate with XSL, there are a few ways around it, but here is the dirty hack I came up with.

To execute something only in IE 7:

<xsl:text disable-output-escaping="yes"><![CDATA[<!--[if IE 7]>]]></xsl:text>
... HTML code ...
<xsl:text disable-output-escaping="yes"><![CDATA[<![endif]-->]]></xsl:text>

To execute something only in non-IE browsers:

<xsl:text disable-output-escaping="yes"><![CDATA[<![if !IE]>]]></xsl:text>
... HTML code ...
<xsl:text disable-output-escaping="yes"><![CDATA[<![endif]>]]></xsl:text>

Now, before you get on at me about using disable-output-escaping, yes, I know, it’s ugly and defeats the purpose of XSL forcing you to create well-formed XML – other solutions not using this technique can be found on the web if you prefer them – but I like this solution because it is simpler than others I have seen posted, more readable, and ultimately, IE conditional comments aren’t well-formed XML anyway.

I scratched my head for an hour or so trying to figure this one out, so I hope you find it useful 🙂