IE conditional comments & XSLT // Blog entry // Josh Nichols

May 20

IE conditional comments & XSLT

While I was building my site in Symphony, I had a bit of a learning curve with XSLT and even simple, little things were a challenge. One of those dumb, little things were getting Internet Explorer conditional comments to output in my XHTML. It took a bit of Googling, but I figured it out.

Below is the code I wanted to output

<!--[if IE]><link rel="stylesheet" href="http://www.joshnichols.com/workspace/css/ie.css" type="text/css" media="screen, projection"><![endif]-->

I tried wrapping it with <xsl:comment> but since there were incomplete nodes inside from the IE specific comment, the XML wasn’t well formed. After searching for an answer on Google, I found out about XML CDATA. It keeps anything between <![CDATA[ and ]]> from being parsed. I added that bit of code and I was able to pass the conditional comment through.

Here’s the final working code

<xsl:comment><![CDATA[[if IE]><link rel="stylesheet" href="http://www.joshnichols.com/workspace/css/ie.css" type="text/css" media="screen, projection"><![endif]]]></xsl:comment>

Anytime you want to pass commented out code that isn’t well formed XML through the XML transformer, you’ll need XML CDATA.

A version for Symphony that’s more automated

If you’re looking for something a little more flexible so you can pass some parameters into the link, you can use this handy bit of code I got from www.nickfitz.co.uk. It’s parameters are specific to Symphony, but can be modified easily.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:output method="xml"
        doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
        doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
        omit-xml-declaration="yes"
        encoding="UTF-8"
        indent="yes" />

    <xsl:template match="/">
        <html>
            <head>
                <!-- Head content -->
                <!-- Call the template that will output IE conditional comments -->
                <xsl:call-template name="conditional-comment">
                    <!-- The 'qualifier' is the version of IE you want to target -->
                    <xsl:with-param name="qualifier" select="'lte IE 8'"/>
                    <!-- The 'contentRTF' contains the link tag with attributes -->
                    <xsl:with-param name="contentRTF">
                        &lt;link rel="stylesheet" type="text/css" href="{$workspace}/css/ie.css" /&gt;
                    </xsl:with-param>
                </xsl:call-template>
            </head>
            <body>
                <!-- Page content -->
            </body>
        </html>
    </xsl:template>

    <!-- The template that prints the IE conditional comment with the paramaters above -->
    <xsl:template name="conditional-comment">
        <xsl:param name="qualifier"/>
        <xsl:param name="contentRTF"/>
        <xsl:comment>
            [if <xsl:value-of select="$qualifier"/>]<![CDATA[>]]>
            <xsl:copy-of select="$contentRTF" />
            <![CDATA[<![endif]]]>
        </xsl:comment>
    </xsl:template>

</xsl:stylesheet>

Josh Nichols

Blog entry archive // Posts from a desiging, gaming, comic-reading nerd