0

In short, I'd like to do this (the conditional part, i know how to include with <h:outputStyleSheet>):

<link rel="stylesheet" href="[path-to-dist]/leaflet.css" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="[path-to-dist]/leaflet.ie.css" />
<![endif]-->

In JSF 2.

Thanks!

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Ben
  • 10,020
  • 21
  • 94
  • 157

4 Answers4

1

Use <h:outputText escape="false">

<h:outputText value="&lt;!--[if lte IE 8]&gt;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;[path-to-dist]/leaflet.ie.css&quot;/&gt;&lt;![endif]--&gt;" escape="false" />

Yes, it's a line of ugliness, but there's really no other way as Facelets is inherently a XML based view technology.

Update: if you happen to use the JSF utility library OmniFaces, you can just use its <o:conditionalComment> component.

<o:conditionalComment if="lte IE 8">
    <link rel="stylesheet" href="[path-to-dist]/leaflet.ie.css" />
</o:conditionalComment>
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
0

I think you should be able to wrap <h:outputText value="#{bean.pathToDist}" /> to your link. Like <link rel="stylesheet" href="<h:outputText value="#{bean.pathToDist}" />/leaflet.css" />.

Petr Mensik
  • 26,874
  • 17
  • 90
  • 115
-1

Try with:

<f:verbatim>
&lt;!--[if IE]&gt;
<link rel="stylesheet" href="path/to/file.css" />
&lt;![endif]--&gt;
</f:verbatim>
Juan G. Hurtado
  • 2,057
  • 16
  • 25
-1

I tryed this:

<h:outputStylesheet library="css" name="blueprint/screen.css" />
<f:verbatim>&lt;!--[if lt IE 8]&gt;</f:verbatim>
<h:outputStylesheet library="css" name="blueprint/ie.css" />
<f:verbatim>&lt;![endif]--&gt;</f:verbatim>
<h:outputStylesheet library="css" name="esap.css" />

the html output was:

<!--[if lt IE 8]><![endif]-->
<link rel="stylesheet" media="screen" type="text/css" href="/esap/javax.faces.resource/blueprint/screen.css.xhtml?ln=css" />
<link rel="stylesheet" media="screen" type="text/css" href="/esap/javax.faces.resource/blueprint/ie.css.xhtml?ln=css" />
<link rel="stylesheet" media="screen" type="text/css" href="/esap/javax.faces.resource/esap.css.xhtml?ln=css" />

the conditional html was put before the stylesheet links.

Fred
  • 1
  • Hi, this section is for answers, not for questions. If you have a question, press "Ask Question" button on right top. – BalusC Jun 14 '13 at 16:13