http://chad.ill.ac/post/353013824/an-effective-javascript-css-cache-busting-technique

We’ve written a PHP function to handle this automatically and put a rewrite rule in place to handle the resulting changes.

More info can be found here.

http://chad.ill.ac

A point to add is that it actually *increases* caching, in a desirable way.

By default, some browsers will aggressively cache a CSS file and refuse to update it even when the content changes, unless you perform a hack like this, while others will download and display the updated one (even if you didn’t refresh and are just hitting the site again).

With additional GET parameters on the URL browsers that do not otherwise cache CSS files start to do so aggressively, until the GET parameters change. This side effect is desirable as it reduces the amount of superfluous traffic.

However, I suggest NOT simply appending the current timestamp (as suggested by one commentator) as that will increase the amount of traffic by having all browsers to re-download all CSS files on every page hit.

A $version variable is a more sensible approach (and on your development environment you can make it seconds since UNIX epoch if you want).

2. Renaming file is too much hassle… especially with versioning in place

3. With Apache and .httpaccess you can add rule to reference file style.css even if you call style134.css from HTML

simply it will ignore number in the filename.
Example (depends on your setup):
RewriteRule style[0-9]*\.css style.css

of course you have to have some admin rights and be able to modify .htaccess…
I am sure this is possible in IIS as well

- Automatically changing filename number by filedatetime is not ideal either… coz it adds additional hit to the file on harddisk on every request, but it is comfortable and maybe worth the loss. Changing html each time css changes by hand is too risky.

4. HTTP cache headers… probably the most prefered way, but involves a bit of work to get it working…

At the end this work should be done by webserver(s) and should be done properly… which is not…

Use Fiddler to see effect of different scenarios :)

We recently gone through the same problem & end up in renaming all css files.

After reading this article I think we should have one tag (sorry I am from java backgroud so giving solution in J2EE words)which renders tag having some postfix (may be release no.) to css and js files.

While doing build & release we can define release no. & rename all css and js files. This will not change css & js files on your source repository. :)

I am going to implement this in our project.

style.css?<=filemtime(’style.css’)>

If the above doesn’t come out properly then I said use:

filemtime(’style.css’)

to get the modified time of the file, so when you update and re-upload it, it will have a different number on the end and will therefore force browsers to re-cache it.

No need for name changing or editing the html each time you want to make a change in the stylesheet/javascript includes

Nut you could rename the file if you wanted to. If your website is setup well there should only be 1 reference to the css file in some header.php file. Chamging the v= is just a very low effort way to get the no caching effect.

but one question: if you have to change the “style.css?version=X” value for all references, why not just rename the file as style.versionX.css?

href=”style.css?version=xy” ???