Manfred Staudinger, Vienna (February 2009)
Note: For a much more powerfull generalisation of CC's see Selecting browser specific elements with XSLT
The following XSLT code runs with both XSLT 1.0 and 2.0. For the latter there is no support in browsers up to now.
Although CC's are a MS specific proprietary extension to HTML comments, they match smoothly the deficiencies of CSS support in MSIE browsers. The most common use case for CC's is to provide a special CSS for IE 6.
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="articles-IE6.css" /> <![endif]-->
I would like to call this a "hidden CC" because its content (the HTML targeted by the CC) is hidden away in a comment. If your transformation runs server-side, this is my preferred way using XSLT to produce the above:
<<xsl:comment><![CDATA[[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="articles-IE6.css" />
<![endif]]]></xsl:comment>>
But when the transformation runs client-side we can do much better. By using
the system-property function together with a nested CC we
reveal its content to become truly HTML. To nobodys surprise I would call this
Conditional Comment a "revealed CC".
<xsl:if test="system-property('xsl:vendor') = 'Microsoft'">
<xsl:comment><![CDATA[[if IE]><![if lte IE 6]><![endif]]]></xsl:comment>
<link rel="stylesheet" type="text/css" href="articles-IE6.css" />
<xsl:comment><![CDATA[[if IE]><![endif]><![endif]]]></xsl:comment>
</xsl:if>>
The above is all you need to know if you use a common CSS file articles.css and the file articles-IE6.css is intended as an addition only for IE 6. In contrast, if you want to use child-selectors and other features from CSS 2.1, you will have still only two CSS files, but they are now used exclusivly: one for IE 6 and one for all the other browsers. The latter can be easily achieved by using a "revealed CC".
<!--[if IE]><![if gt IE 6]><![endif]--> <link rel="stylesheet" type="text/css" href="articles-css21.css" /> <!--[if IE]><![endif]><![endif]-->
Even this CSS stylesheet will be read by IE 7, Firefox, Opera and so on, it would be wrong to say we can target Firefox. The only target here is IE 6, which is prohibited to read the link. The translation of the above into XSLT is straithforeward and can be used for client-side or server-side transformations.
<xsl:comment><![CDATA[[if IE]><![if gt IE 6]><![endif]]]></xsl:comment> <link rel="stylesheet" type="text/css" href="articles-css21.css" /> <xsl:comment><![CDATA[[if IE]><![endif]><![endif]]]></xsl:comment>>
(If you would like to read more about this proprietary construct, have a look my article Taming your multiple IE standalones at p.i.e., in particular the sections "More on CC's: the ugly ones" and "Selecting IE's").