In my html pages I use the Spring message bean like so:
#{ms.my_text_label}
ms is of type ReloadableMessageSourceBundle and will translate my_text_label by looking in some resource bundle files. Can I make it possible to use this in my CSS files as well?
Disclaimer: I'm ignoring the Spring WebFlow part in the question and do as if the JSF project doesn't use any Spring artifacts.
You can just use EL in CSS files the usual way if you load the CSS file via <h:outputStylesheet> instead of plain HTML <link rel="stylesheet">:
<h:outputStylehseet name="some.css" />
Note: this doesn't work for JS files, even not the ones loaded via <h:outputScript>. EL is supported in CSS files for actually only one technical reason: being able to reference CSS background images via #{resource} mapping without the need to hardcode whole library and JSF mapping.
See also:
How to reference CSS / JS / image resource in Facelets template?
How to reference JSF image resource as CSS background image url
Related
I have a fairly simple webpack project - built using the Webpack guide. See https://github.com/timburgess/webpack-postcss-tailwind
There is a style.css in the src directory but there is no .css being added to the /dist directory on build.
Reading further, any css should be added as an inline style and that's not occuring.
Resolved with https://github.com/webpack-contrib/mini-css-extract-plugin per Richards answer.
Webpack will bundle the css files referenced via import statements in your source javascript files into the output javascript file (bundle.js). You'll see the classes being applied to the webapp at runtime via inline <style> tags applied dynamically to the html.
Many developers do not think this behaviour appropriate and will use a special plugin to get webpack to produce seperate bundled .css files that you then reference in your html using the traditional (and caching friendly) <link rel="stylesheet" type="text/css" href="bundle.css"> tag. See:
https://github.com/webpack-contrib/mini-css-extract-plugin
I'm trying to refactor a nodeJs project and my css is in my .ejs file. I need to put some dynamic data in my css file. I need to have dynamic data in my css, when my css is in my EJS file it's good.
But when I put my css into an external file, nothing happens!
So, how can I inject ejs tag in my external stylesheet file?
This is one of the questions to which one has to ask you - why do you want to do that? You are asking about a solution to a problem that you didn't describe.
By suspicion is that you are trying to use a templating system for something that could be done with a CSS preprocessor like Sass or Less. Particularly Less can be easily used on both the client side and server side. See http://lesscss.org/#client-side-usage
Now, if you really want to use a templating system created for HTML to generate CSS then you will have to take few things into account: You need to store your CSS templates somewhere where your HTML templates are stored, not where you store your static assets like images. Then, your server will have to serve your generated CSS with a correct MIME type. Then, your HTML will have to reference the styles using a URL to your generated CSS that will be generated on every request instead of being served directly from disk.
I am using Magnolia CMS 5.3.4, the STK, and freemarker (FTL) template scripts.
Some components I have defined relies on specific javascript files. Right now, what I do is that I include these javascript files in the main.ftl template script. I am looking for a way to get them included only if the specific component is present on the page.
I tried to use the jsFiles property in Template Definitions, but it seems it works only for page template definition.
The jsFiles property indeed works only for pages not for components. This is because Magnolia wants to include those files in header already, rather than loading them in middle of the body when component gets rendered.
As a general practice I would anyway recommend combining your js files into one (look at for example plugin loader in resources on how this is done) and set longer time for caching such file so that browser downloads all the script just once for the whole site rather then page by page. The bigger js file you are sending over the more overhead you are cutting off from requesting separate files and better the compression of content for transport will work.
HTH,
Jan
When you need to reference a resource file from a JSP file within SpringMVC you have to pass an absolute url for the resource, which is traditionally done with either <c:url ... or href="${pageContext.request.contextPath}/css/....
However, how do pass absolute urls within my CSS and JS files? In CSS this can be necessary at times you use a url for a property. In my JS files I may need to make an AJAX call to an absolute URL that I define somewhere. In both of these instances these URLS can change at different times, but Googling has not pointed me to the best way to handle cases like these.
I wouldn't be above adding a new maven plugin or some other JS or CSS compiler to achieve this.
CSS URLs don't need to be absolute, because the URLs are not resolved relative to the path of the current page, but relative to the path of the CSS file itself.
For JS, you simply have to define, for example, the base URL in a global variable, from your base JSP template, and reuse that base URL from your JS files:
In your JSP:
<script>var BASE_URL = "<c:url value='/' />";</script>
<script src="someFile.js"></script>
In your JS file:
$('#foo').load(BASE_URL + 'some/path.html');
In an mvc 3 razor project I have a helper which creates a component. I can use this helper to create as many components as I need in the same page.
I have different folders containing css files and their images.
Can I specify the css style of each component from the helper?
i.e #html.MyComponent(100, 200, "pink") will uses the style.css in pink folder.
Ps: I am not using html5 neither css3
If you would use classes instead of files it would be much easier. I would just use different styles for themes. You should look at this question: ASP.NET MVC 3, how to do themes right
ASP.NET MVC 3 Razor: Include JavaScript file in the head tag
I think the same thing can be applied but I don't know if you can do it from a helper.
If you are set on doing it this way - then
You need to select the css file at the top for pink
You need to include all style sheets in loading.
You need to dynamically include style sheets when requested by MyComponent. This is tough as you may end up double including them. You can accomplish this via an ActionFilter to write out the css tags at the end, but this is a hack and I wouldn't recommend it.
Stick with convention and your styles should be requested at the top, so you need to know which styles you are using on the page. Your components shouldn't care about loading a style sheet, it should already be loaded which means you have to make this decision at the top of your page. Since you should already 'know' the names at this point (pink, etc) you can easily write the code at the top to request these files via a simply
<LINK href="#string.Format("/{0}/style.css",YourStyleSheetnameIePinkInThisExample)" rel="stylesheet" type="text/css">