omnifaces

 - 

Available since OmniFaces 1.0

The <o:conditionalComment> component renders a conditional comment. Conditional comments are an IE specific feature which enables the developer to (out)comment blocks of HTML depending on whether the client is using IE and if so even which version. They are often seen in combination with CSS stylesheets like so:

<!--[if lte IE 7]>
    <link rel="stylesheet" href="ie6-ie7.css" />
<![endif]-->

However, Facelets renders the comment's contents HTML-escaped which makes it unusable.

<!--[if lte IE 7]&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;ie6-ie7.css&quot; /&gt;
&lt;![endif]-->

Also, if jakarta.faces.FACELETS_SKIP_COMMENTS context param is set to true then it will even not be rendered at all. You would need to workaround this with an ugly <h:outputText escape="false">.

<h:outputText
    value="&lt;!--[if lte IE 7]&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;ie6-ie7.css&quot; /&gt;&lt;![endif]--&gt;"
    escape="false" />

This component is designed to solve this problem.

<o:conditionalComment if="lte IE 7">
    <link rel="stylesheet" href="ie6-ie7.css" />
</o:conditionalComment>

Note that you cannot use this with <h:outputStylesheet> as it would implicitly be relocated as direct child of <h:head>.

Demo

Only if you're using IE9 or older, you should see a pinkish background on this page. Support for conditional comments has been discontinued in IE10. It will only work if the IE10 browser is configured to run in a specific browser mode, e.g. IE9 mode.

Demo source code
<o:conditionalComment if="IE">
    <link rel="stylesheet" href="#{resource['layout:css/ie.css']}" />
</o:conditionalComment>
<p>
    Only if you're using IE9 or older, you should see a pinkish background on this page. 
    Support for conditional comments has been discontinued in IE10. 
    It will only work if the IE10 browser is configured to run in a specific browser mode, e.g. IE9 mode.
</p>
Documentation & Sources

VDL documentation

API documentation

Java source code