How can I implement “CSS versioning” (to solve cache issues) using JSF 2 h:outputStylesheet?


Tags: java,css,versioning,jsf-2,java-ee-6

Problem :

I'm starting to work with JSF 2 so I wanted to give a try to h:outputStylesheet. It works fine but then I tried to apply the "pattern" or trick of adding a query string to the request which changes with the file version to force browsers to fetch changes.

Something like what is used here.

Unfortunately I haven't been able to do it. Actually, when using that tag it doesn't generate a simple URL but a computed one which already has a query string. I've found some info about versioning of resouces in JSF 2 both in the spec and here, but it seems to refer to multiple versions of a resource which is not what I need.

Of course I can always go back to NOT use the new tag. But I wanted to share this here for discussion.

Update 1 - some example:

What I've tried is something like this:

<h:outputStylesheet library="css" name="estilo.css?v=1" target="head"/>

Which renders as:

<link type="text/css" rel="stylesheet" href="RES_NOT_FOUND" />

Quite descriptive. ;-)

What I try to get is something like this:

<link rel="stylesheet" type="text/css" href="../css/estilo.css?v=1"/>

Which, using JSP, I used to put this way:

<link rel="stylesheet" type="text/css"
 href="<c:url value='/css/estilo.css?v=${initParam.version}'/>"/>


Solution :

Facing the same challenge, I ended up extending javax.faces.application.ResourceHandlerWrapper and javax.faces.application.ResourceWrapper to append "&v=x.y.z" to the result of ResourceWrapper#getRequestString().

I saw this kind of solution implemented by Primefaces and Openfaces. Just take a look at the source of

org.primefaces.application.PrimeResourceHandler#createResource(String resourceName, String libraryName)

and

org.primefaces.application.PrimeResource#getRequestPath()

Available here.

Don't forget to add your implementation to faces-config.xml:

<application>
  <resource-handler>your.package.YourResourceHandlerWrapper</resource-handler>
</application>

    CSS Howto..

    how to get kendo ui mobile style silver

    How can I center Twitter-Bootstrap 3 navbar buttons?

    Website Content Shown on Moz but not Chrome

    How to absolutely position element against page rather than floated parent?

    How to keep image position despite window/device size?

    How do i cover the rail of an Ajax Slider Extender when i move the handle from step 0 to step 50 and have those steps colored gray?

    How to change placeholder color for number input? (Firefox)

    How to create custom shapes with pseudo classes in CSS3

    How to align vertical text horizontally center?

    How to create a box having border top width more than content at different browser display size?

    How to wait for a video background in HTML until it finish and then view the contents of body section?

    using css, how to position image so when resizing window, image will not move

    form not showing up properly in chrome and IE6

    How to not make text colored within a href link but the text is also within div?

    How do i apply Table Header color to Table body using JQuery

    How can I divide a div element's content with CSS selector?

    How to show hidden div when javascript is disabled?

    How to keep text in the middle of the screen even when re-sizing page in html/css

    How to apply CSS string using Javascript/jQuery without parsing/tokenizing to retrieve property-value pairs?

    FontAwesome icon showing as black box. What CSS is needed to display icon?

    How to animate a rotated DOM element with CSS

    Border-bottom not showing correctly

    How to horizontally center Twitter Bootstrap grid elements

    CSS 2 Sass: How do I change the output format of the generated SCSS?

    CSS: How to use calc(100% - 20px) to get an area to fill up all area OTHER than that of a fixed-width element?

    How to make a layout scale with CSS?

    How to get right sidebar up on main content on resize of flexible with page?

    How to get this functionality to work

    GTK+ 3 CSS: How to specify text alignment for a label?

    using overflow hidden, show a partial element when the children are too large for container