internet-explorerjsfjsf-2faceletsconditional-comments

How to use Internet Explorer conditional comments in JSF?

This is my source code file in Eclipse:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

</body>
</html>

When I view this in IE9 it renders the text:

<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

If I view source it says:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!--[if lt IE 9]&gt;

      &lt;script src=&quot;http://html5shim.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt;

    &lt;![endif]-->
</head>

<body>


</body>
</html>

Any reason why the source has changed once served by the Faces Servlet?

Solution

  • Known issue, JSF rendering escapes the comments. You can solve it by using <h:outputText escape="false"> and HTML entities. You can also use OmniFaces <o:conditionalComment> to solve it in a nicer manner. See also the showcase site:

    The <o:conditionalComment> 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 javax.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>.