Conditional comments are used to provide and hide code to and from Internet Explorer. This feature was introduced in IE 5 and will be deprecated in IE 10. Below we will use a conditional to say, if the browser is IE 9 then we want to include moderizer script, a JavaScript feature detection library, in the page.
<!DOCTYPE html>
<html>
<head>
<title></title>
<!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js" type="text/javascript"></script><![endif]-->
</head>
<body>
</body>
</html>While this seems like a trivial task the problem is when you are using JSF it escapes comments which makes conditionals unusable. If you were to include the line above and render within JSF facelets the encoded output looks like:
<!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js" type="text/javascript"></script><![endif]-->JSF outputText
One way to fix this is to use JSF the outputText and set escape attribute to false. I started off running the entire snippet above through an online escape tool and then pasting it into the JSF code. The final output looks like:
<h:outputText escape="false" value="<!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js" type="text/javascript"></script><![endif]-->"/>OmniFaces conditionalComment
You can also use OmniFaces
Unfortunately neither way supports natural front end development and requires an ugly workaround to make something so simple work.