IE7-only stylesheet for XSL document

Question

How do I add an IE7-and-lower-only stylesheet to an XSL page? I tried adding it into the template for header information like so:

<xsl:template name="header">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/rcm/verisign/style/2012/ie7.css"/>
<![endif]-->
</xsl:template>

And the conditional never gets executed in my document, even though I use the same snippet in HTML-only documents and it works fine. What gives?

Answer 1

The comment will be seen by the parser as a comment in the XSL, and will be dropped from the generated HTML code.

If you want to generate a comment into your HTML, you need to enclose it inside a CDATA block, so it will be seen by the XSL parser as plain text to be copied to the destination document verbatim.

The code would look like this:

<![CDATA[
  <!--[if lte IE 7]>
  <link rel="stylesheet" type="text/css" href="/rcm/verisign/style/2012/ie7.css"/>
  <![endif]-->
]]>

Everything between <![CDATA[ and ]]> will be treated as plain text.

Hopefully that should answer your question.

However, if at all possible, I'd suggest the best solution here would be to drop support for IE7. The usage stats for it have dropped through the floor in the last six months or so - it's almost as low as IE6 now; there's hardly anyone still using it. I appreciate in some cases you may not have a choice, but if you do have a choice, my advice is to drop it.

[EDIT]

Okay, after further research, it seems you're right: a plain CDATA block does escape its output (despite claims to the contrary in many places).

Instead, you need to use <xsl:comment> to generate an HTML comment in the output. Doing this with conditional comment syntax gets quite messy, and you will probably still need to use CDATA.

The best example I can find is here: http://getsymphony.com/download/xslt-utilities/view/21798/

As you can see, it's quite a lot of code.

A short version (without the flexibility) might look like this:

<xsl:comment>
    [if lte 7<![CDATA[>]]>
    <link rel="stylesheet" type="text/css" href="/rcm/verisign/style/2012/ie7.css"/>
    <![CDATA[<![endif]]]>
</xsl:comment>

Hope that helps. Sorry the original answer was incomplete.

Answer 2

Here is one proven way to do it -- this is one of the rare cases when DOE is helpful:

<xsl:text disable-output-escaping="yes">
        &lt;!--[if lte IE 7]>
        &lt;link rel="stylesheet" type="text/css" href="/rcm/verisign/style/2012/ie7.css"/>
        &lt;![endif]-->
</xsl:text>

A complete example:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output omit-xml-declaration="yes"/>

 <xsl:template match="/*">
    <xsl:text disable-output-escaping="yes">
        &lt;!--[if lte IE 7]>
        &lt;link rel="stylesheet" type="text/css" href="/rcm/verisign/style/2012/ie7.css"/>
        &lt;![endif]-->
    </xsl:text>
     <p>
       Done.
     </p>
 </xsl:template>
</xsl:stylesheet>

When this transformation is applied on any XML document (not used), the wanted, correct result is produced:

<!--[if lte IE 7]>
        <link rel="stylesheet" type="text/css" href="/rcm/verisign/style/2012/ie7.css"/>
        <![endif]-->
<p>
       Done.
     </p>