Sometimes you just don’t want your CSS or Javascript files to be cached. For instance, I don’t feeling like having to explain to a customer how to disable their cache during the development of their new website whenever they have early access or want to take a peek and don’t see the desired changes I already implemented, just because they have some greedy cache setting.
In those cases I have to fire up another browser on another OS ( I work with Firefox on OS X, most clients just use Internet Explorer on Windows ) so I can guide them step-by-step through the process, which is pretty time-consuming. That’s why I use the following code snippit to prevent my CSS and Javascript files from being cached.
<link href="/css/stylesheet.css?<?php echo time(); ?>" rel="stylesheet" type="text/css" />
This results into something like this.
<link href="/css/stylesheet.css?1281262375" rel="stylesheet" type="text/css" />
The timestamp behind the CSS file now changes every second so every time the page is loaded a different timestamp will appear which prevents it from being re-used from the users’ cache. This also works perfectly for Javascript files.
Please note that this is undesirable for a production environment because you want fast load times in production. So only use this during the development or testing phases for your website or web application.
Just a thought here, but could this not every easily be taken to a production environment simply by using a variable that has a version number and echo that instead of the time?
Sure, as long as you don’t have to change it too often. I’ve seen people using the filemtime() of the CSS or JavaScript file but that tends to get really slow if you get a lot visitors, which could impact your usability severely!
or, you know, actually learn how the HTTP cache related headers work and do this the right way.
True, I’m planning to do a post on this in the upcoming week. This example is ideal for the people that aren’t able or allowed to edit a .htaccess file.
I use the version number like Alex suggests as well. My deployment script generates a new version number on every release. This does not have a measurable influence on the performance. The user will still have the performance advantage from caching. The javascript and css files are also concatenated and compressed by the same scirpt. I use don’t have to use the version, concatenation and compression during development. It took about an hour to google about it, find the tools and create the script.
Like I said, the tiny snippit I posted above is ideal for testing purposes. Your solution however seems perfect for production!
couldnt you just set a no cache header for requests on css/js?
Yup, I’ll do a post on that in the upcoming week!
I thought that the Ctrl+F5 combo (that is universal to all browsers) refreshes the page and bypasses the cache.. Wouldn’t this be easier to explain to your customers??
Or Cmd+R, or Ctrl+Shift+R, or … Sadly, Ctrl+F5 is nowhere near universal for browsers. In most cases it just sends a “If-Modified-Since” header.
More info on this in this topic on Stack Overflow.
By the way… if you’d like to make a hard-core version on preventing javascript/css caching but you also like to prevent the reload of your source on every page call, you can try to make a kind of virtual path with url rewriting (exp. mod-rewrite -> apache)
Such an url could look like this: http://www.domain.com/css/12345/styles.css
the rewriting module will change this to -> http://www.domain.com/css/styles.css with the benefit, that you only must change the revision of the style sheet (for example in a global config file) and you can ensure, that every visitor of your page get the right version.
Yup, that would make an awesome version tool for a production environment!
Thanks for an excellent solution. My issue was that I had Javascript RSS feeding the main page but all js scripts cached. The js was being cached and the RSS was not being updated. Your fix works perfectly. I spent a day scratching my head and trawling the web.
Cheers! (next round’s on me)