The Innocent Statement

I have just had a killer 2 hours trying to make my XSL translate this XML:

<base> 
	<item name="cssFiles" media="screen"> allBrowers.css</item> 
	<item name="cssFiles" media="screen" ieonly="true"> ieOnly.css</item> 
</base>  

Into this XHTML:

<style type="text/css" media="screen">  
	@import url("allBrowers.css"); 
</style> 

<!--[if gte ie 5.5000]>  
	<style media="screen" type="text/css"> 
 		@import url("ieOnly .css"); 
	</style>  
<![endif]-->    

You will all recognise of course, the above, as a style sheet inside a Conditional Comment. Used commonly in the web design world to give that ‘little extra' CSS that is needed to make things work in IE sometimes.

As part of the separation of Data and Structure, my XML file contains the list of CSS files to be used in a page (and other data such as navigation, page content). Then I use XSL to translate my XML Data into an XHTML page to be served.

BUT, XSL has a little thing with comments. It doesn't output XML comments (that's <!—something --> ) from the XSL document. Instead, if you wish a comment to be in your output XHTML you have to use <xsl:comment> . So this didn't work:  

<xsl:for-each select="base/item[@name='cssFiles']">  
	<xsl:choose>  
		<xsl:when test="@ieonly">  
			<!--[if gte ie 5.5000]>  
				<style type="text/css" media="{@media}">  
					@import url("<xsl:value-of select="." /> "); 
				</style>  
			<![endif]-->  
		</xsl:when>  
		<xsl:otherwise>  
			<style type="text/css" media="{@media}">  
				@import url("<xsl:value-of select="." /> "); 
			</style>  
		</xsl:otherwise>  
	</xsl:choose>  
</xsl:for-each>    

Nought wrong with that I suppose, since if there is a comment in the XSL, surely it's only meant to be in the XSL. Good idea not to include it I say. And if I HAVE to have a comment in the XHTML, I can use <xsl:comment> yeah? Well, yes, but it's not that easy. See for example, I first tried this (about an hour after realising that I had to use <xsl:comment> ):  

<xsl:for-each select="base/item[@name='cssFiles']">  
	<xsl:choose>  
		<xsl:when test="@ieonly">  
			<xsl:comment> [if gte ie 5.5000]>  
				<style type="text/css" media="{@media}">  
					@import url("<xsl:value-of select="." /> "); 
				</style>  
			<![endif]</xsl:comment>  
		</xsl:when>  
		<xsl:otherwise>  
			<style type="text/css" media="{@media}">  
				@import url("<xsl:value-of select="." /> "); 
			</style>  
		</xsl:otherwise>  
	</xsl:choose>  
</xsl:for-each>  

Looks like it should work, but it doesn't. The <! at the <![endif] throws the XSL into a wobbly, because that is used in DOCTYPES. I almost gave up at this point, but instead I tried replacing the <! with <!. I don't know why I tried it, but it worked. No more error! Well, it kind of worked. Now the <style> tag is missing all together, and all you're left with is:  

<style type="text/css" media="screen">  
@import url("engvocabEN.css"); 
</style> 

<!--[if gte ie 5.5000]>  
<![endif]-->    

Again, at the point of giving up, and after trying a few different, pointless things, I thought about my method for dealing with the <! problem. Then I went about changing all the Greater Than (> ) and Less Than (<) symbols of the <style> tag into > and < prospectively. Giving me this:  

<xsl:for-each select="base/item[@name='cssFiles']">  
	<xsl:choose>  
		<xsl:when test="@ieonly">  
			<xsl:comment> [if gte ie 5.5000]>  
				&lt;style type="text/css" media="<xsl:value-of select="@media" /> "&gt;
					@import url("<xsl:value-of select="." /> "); 
				&lt;/style&gt; 
			&lt;![endif]</xsl:comment>  
		</xsl:when>  
		<xsl:otherwise>  
			<style type="text/css" media="{@media}">  
				@import url("<xsl:value-of select="." /> "); 
			</style>  
		</xsl:otherwise>  
	</xsl:choose>  
</xsl:for-each>   

A little messy sure, but the output:  

<style type="text/css" media="screen">  
	@import url("allBrowers.css"); 
</style> 

<!--[if gte ie 5.5000]>  
	<style media="screen" type="text/css">  
		@import url("ieOnly .css"); 
	</style>  
<![endif]-->   

Finally! And now hopefully, you will never have to solve this problem either!