Can I use EL for external CSS files with JSF?

Question

In external style sheets of my current JSF project, there are hard-coded links to external resources like

.someId { background-image:url(/context/resources/images/example.jpg); }

In the JSF xhtml documents, I could use EL expressions like ${request.contextPath} but how can EL processing be applied to CSS files?

(Related: How can I embed an CSS background image link with JSF?)

---

Hard-coding of context paths has a disadvantage: the context path - /context in the example - of a web application can be changed at deploy time by modifying the web.xml (or by renaming the web application archive file if no context is specified in web.xml), but links to resources in the CSS files would still point to the unchanged hard coded context, and cause resource not found errors.

Answer 1

Maybe I misunderstand your question, but if by external css you just mean your own css that is not inline, then with JSF 2.0 you can use EL in your css as long as you include it with an <h:outputStylesheet>. For example, I have a project with this structure:

war
|__ WEB-INF
|   |__ *standardStuff*
|__ resources
|   |__ css
|   |   |__ style.css
|   |__ images
|       |__ image1.png
|__ xhtml
|   |__ index.xhtml

This is clearly not the complete file list, but should be enough to get the point. Then I have this in my index.xhtml:

<f:view xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:ui="http://java.sun.com/jsf/facelets">
  <h:head/>
  <h:body>
    <h:outputStylesheet library="css" name="style.css" target="head"/>
    <ui:include src="content.xhtml"/>
  </h:body>
</f:view>

And in my css I have something like this:

.someClass {
    background-image: url('#{resource['images/image1.png']}');
}