css - <!--[if IE]> conditional comments are rendered HTML-escaped in Facelets

Question

I'm trying to use an IE conditional comment to declare a CSS resource:

<h:outputStylesheet name="common.css" library="css" />
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="#{resource['css:ie.css']}" />   
<![endif]-->    

However, that doesn't seem to work. I'm seeing this in my generated HTML output:

<link type="text/css" rel="stylesheet" href="/context/faces/javax.faces.resource/common.css?ln=css" />        
<!--[if IE]&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/context/faces/javax.faces.resource/ie.css?ln=css&quot;/&gt;
&lt;![endif]-->

It works fine without the conditional comment. I'm not using the context parameter javax.faces.FACELETS_SKIP_COMMENTS. How is this caused and how can I solve it?

Answer 1

This indeed won't work as Facelets implicitly HTML-escapes the comment's contents. Your best bet is to put it in a <h:outputText escape="false"> as follows:

<h:outputText value="&lt;!--[if IE]&gt;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/#{resource['css:ie.css']}&quot; /&gt;&lt;![endif]--&gt;" escape="false" />

This is however a line of ugliness. The OmniFaces JSF utility library has a <o:conditionalComment> for exactly this purpose:

<o:conditionalComment if="IE">
    <link rel="stylesheet" type="text/css" href="#{resource['css:ie.css']}" />   
</o:conditionalComment>

---

Unrelated to the concrete problem, you are not really using the library attribute the right way. It should identify a common "theme", not the subfolder where the files are placed in, just put that subfolder in the name attribute instead. See also What is the JSF resource library for and how should it be used?

<h:outputStylesheet name="css/common.css" />
<o:conditionalComment if="IE">
    <link rel="stylesheet" type="text/css" href="#{resource['css/ie.css']}" />   
</o:conditionalComment>