Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 911
DD. Avatar asked Dec 26 '12 23:12

DD.


People also ask

What is IE HTML?

This method allows you to use simple code in your HTML to detect Internet Explorer (IE). You can determine whether or not the end user is using IE, and if so, which version. This allows you to provide content based on which browser is being used.

What is the reason for using conditional comments?

Conditional comments are conditional statements interpreted by Microsoft Internet Explorer versions 5 through 9 in HTML source code. They can be used to provide and hide code to and from these versions of Internet Explorer.


2 Answers

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

like image 68
SJuan76 Avatar answered Nov 17 '22 18:11

SJuan76


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>
like image 35
DD. Avatar answered Nov 17 '22 17:11

DD.