1

I am unable to correctly specify the order of resource loading in JSF, in particular when using primefaces as well. I have a number of stylesheets that I need to include, all of which should be loaded after the primefaces resources.

I have this:

<h:outputStylesheet library="mw.static" name="css/prime.css"/>
<h:outputStylesheet library="mw.static" name="css/main.css"/>

The result in HTML is as follows:

<link href="/static/css/prime.css?rv=1396621461" rel="stylesheet" type="text/css"></link>
<link href="/static/css/main.css?rv=1396621461" rel="stylesheet" type="text/css"></link>
<link href="/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&rv=1396621461" rel="stylesheet" type="text/css"></link>
<script src="/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&rv=1396621461" type="text/javascript"></script>
<script src="/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&rv=1396621461" type="text/javascript"></script>
<script src="/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&rv=1396621461" type="text/javascript"></script>
<link href="/javax.faces.resource/charts/charts.css.xhtml?ln=primefaces&rv=1396621461" rel="stylesheet" type="text/css"></link>
<script src="/javax.faces.resource/charts/charts.js.xhtml?ln=primefaces&rv=1396621461" type="text/javascript"></script>

As is clear, the order of my own stylesheets is respected, as prime.css is included before main.css. However, I need both after the primefaces css files.

Generally, it would be best if the HeadRendered would first write the primefaces css files, then my css files, then the primefaces js and then my additional scripts. This would comply with google's pagespeed recommendations and fix my css dependency issue.

The obvious thing to do here was to use the facet last approach, placing this into the body:

<f:facet name="last">
<h:outputStylesheet library="mw.static" name="css/prime.css"/>
<h:outputStylesheet library="mw.static" name="css/main.css"/>
<!--[if lte IE 8]>
<link rel="stylesheet"  href="${path.styleSheet}-ie.css" type="text/css" />
<![endif]-->
<ui:insert name="css"/>
</f:facet>

However, while the prime.css and main.css are indeed now behind the primefaces resources, my ui:insert tag (which inserts some css that I have to put in the page itself) is now skipped, along with the ie-specific stylesheet. So, no solution here either.

I'm curious if any of you have managed to resolve this. I've walked through the HeadRenderer implementation of primefaces, but I cannot work out a straightforward way to get this to work (especially as the order of the css files needs to remain unchanged).

Steven De Groote
  • 2,187
  • 5
  • 32
  • 52

1 Answers1

0

Try place
<h:outputStylesheet library="mw.static" name="css/prime.css"/> <h:outputStylesheet library="mw.static" name="css/main.css"/> inside <h:head> tag, if you don't have this tag just replace this with <head>

There is another way to make your css work, but will require a tedious work.
You need to put '!important' after each property.

Will
  • 412
  • 6
  • 16
  • It is not recommended to use `head` in order of `h:head` in JSF: http://stackoverflow.com/a/6044008/1199132 – Aritz Apr 05 '14 at 11:43
  • Well I don't know another way of include css file that will be the last file added in html without 'h:head'. – Will Apr 08 '14 at 20:14