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

问题

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?

回答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>

回答2:

I suggest

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

So you escape only small piece of code and #{request.contextPath} works as expected

来源：https://stackoverflow.com/questions/8574588/if-ie-conditional-comments-are-rendered-html-escaped-in-facelets

标签

css

internet-explorer

jsf

facelets

conditional-comments