Browser-dependent CSS switch with JSF

I need some browser specific CSS in my JSF2 application (Mojarra 2.1, Tomcat 7).

I tried adding to my template:

    <!--[if IE 8]>
        <link rel="stylesheet" type="text/css" href="#{cfgs.externalCssUrlIE8}" />
    <![endif]-->

but the comments are not rendered since I also use:

<context-param>
    <!-- Removes any comments from the rendered HTML pages. -->
    <param-name>javax.faces.FACELETS_SKIP_COMMENTS</param-name>
    <param-value>true</param-value>
</context-param>

my problem... when I disable `javax.faces.FACELETS_SKIP_COMMENTS, I get a bunch of other problems.. Also I don't think my source-code comments belong to the generated pages.

I also tried to put the switch in CDATA like:

<![CDATA[
 <!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="#{cfgs.externalCssUrlIE7}" />
 <![endif]-->
]]>

but the inner < are rendered as html entities.. :-/, so its not working.

Question: Is there any other solution? Does any JSF2 tag exist to handle this? External tag libraries?

Thanks in advance, Steve

Browser-dependent CSS switch with JSF

3 Answers