How to use Internet Explorer conditional comments in JSF?

Asked 26/12, 2012 at 23:37 Answered 29/12, 2015 at 22:52

Solved internet-explorer jsf jsf-2 facelets conditional-comments

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?

Presumption answered 26/12, 2012 at 23:37 Comment(0)

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:

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

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>.

Wildon answered 26/12, 2012 at 23:53 Comment(0)

This works:

<h:outputText escape="false" value="&lt;!--[if lt IE 9]&gt;   &lt;script src=&quot;http://html5shim.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt;  &lt;![endif]--&gt;"></h:outputText>

Presumption answered 26/12, 2012 at 23:58 Comment(1)

You do not need to put the script part in there. You could also split it up and keep the script tag out of outputText. – Prodigal 23/7, 2013 at 10:8

I used f:verbatim, much more cleaner.

For example

<f:verbatim>
    <!--[if gte IE 8]>
       <script type="text/javascript">
        //<![CDATA[
        /** Javascript **/
        //]]>
        </script>
    <![endif]-->
</f:verbatim>

JSF Core Tag Reference

Note: This tag is deprecated since JSF 2.0 (Dec 2009). It's intented for JSP only

Kall answered 29/12, 2015 at 22:52 Comment(1)

This tag is deprecated since JSF 2.0 (Dec 2009). It's intented for JSP only. – Gaullism 30/12, 2015 at 9:46

Recommended topics

Hot tags