Thread

When I use CSS template to store CSS info, and then embed it in the content template headers, the code that results on the client side looks like this:

<link rel=“stylesheet” type=“text/css” href=“http://dev.mysite.com/?css=site_embeds/department_style.v.1233752925” />

Why does the CSS file have a versioned filename, and can I somehow make it non-versioned?

The reason for why I ask this is that I’ve been recently using an excellent CSS layout tool, Stylizer. With it it’s possible to open a page, and it loads the corresponding CSS information which can then be modified, and saved. The current version demands the CSS file extension to be *.css, but the next version - due out “any day now” - will remove that requirement making it possible to load CSS information, for example, from a file with *.php extension.

For time being - as I’ve been developing the site - I’ve maintained local copies of the pages I’ve designed, and then cut-and-pasted the CSS info into the corresponding CSS template. I’d like to automate the process in the future, so that when I open a page, Stylizer would automatically load the corresponding CSS file, and when I hit save, it would save it at the server filepath (via WebDrive).

The next version of Stylizer will load the versioned file (like “department_style.v.1233752925” above), but there is no way for the program to know where to save a modified copy the name doesn’t match that of the saved template.

I’m almost tempted to link the pages to static css files on the server, outside of EE’s templating system, but wanted to first understand what is the reasoning behind the versioning being added to the filenames since the pages themselves obviously are always saved with the same client-facing names.

As always, thanks for any insights,

Ville

When I use CSS template to store CSS info, and then embed it in the content template headers, the code that results on the client side looks like this:

<link rel=“stylesheet” type=“text/css” href=“http://dev.mysite.com/?css=site_embeds/department_style.v.1233752925” />

Why does the CSS file have a versioned filename, and can I somehow make it non-versioned?

The method above extracts the css from the css template stored in your database.  What is sounds like to me, is that you are creating an external css file, then pasting it into the database.  Why not just call the css file directly?

<link rel="stylesheet" type="text/css" href="http://dev.mysite.com/department_style.css" />

The versioning (which occurs when using the {stylesheet=} variable for your CSS paths) helps trigger browser caching behavior, which when accompanied with appropriate headers, enables your visitors to keep your CSS cached unless you update the template, in which case the new timestamp will trigger the browser to fetch the updated CSS.  This keeps things speedier for your users and saves you on server resources.

Herb, that’s exactly what I’ve been thinking of doing.

Derek, thanks for the clarification; I thought it would have to do with caching (though I thought it would work the other way around: to ensure that a CSS file would be reloaded when changes were made to it). I’ll have to weight the benefit from caching vs. the ease of maintenance the way I described.

My recent Cachebuster extension might help you with this. It allows you to use regular external stylesheets (i.e. not stored within the EE template system), but you can still have them work correctly in terms of caching/forcing new downloads.