Refresh CSS file in cache with ?version=XXX

Question

In order to refresh a CSS file in cache, I often use the file.css?version=DDMMYYYY trick. However, I have a question about this method.

I'm working on an old extranet. All pages are using the same CSS file. The extranet doesn't have any template file and this css is included in every page of the extranet. I need to refresh this css file for all the extranet pages.

My question is : I want to use the file.css?version=DDMMYYYY trick on the login page. The other pages will still include file.css (without the ?version part)

If the user come on the login page, he will receive the new version of the css file. But which version will be used on the other pages? The old version (file.css) or the new version (file.css?version=DDMMYYYY) ?

In other words, when the user come on the login page, which files will be in his cache :

• file.css and file.css?version=DDMMYYYY
• only file.css, updated to the new version

I'm sorry for this beginner question but I have some difficulties to test it myself.

Thanks for your help!

Answer 1

When the file gets cached, it will be with the full url including the ? and stuff after it. The caching headers are supplied by the server and obeyed by the browser.

Essentially

file.css?version=DDMMYYYY
and
file.css

Are 2 separate files for the browser, with no connection what so ever.

My suggestion to you would be to use the new url consistently on all pages.

Answer 2

This will not work, they will be cached differently, although file.css and file.css?version=DDMMYYYY are the same file in the filesystem, they are different URIs and the server response can be totally different... So, file.css could load the old file from cache at the same time that you get the correct file with file.css?version=DDMMYYYY.

A way to prevent this could be totally disabling the cache, this would cause the css file to be download every time you load a page, but would give you instantaneous update, or you could set the cache to expire in short time, like 10 minutes, 2 hours, so it would be downloaded once every 10 min/2 hours...

If you are using apache with htaccess enabled you could do this to disable the cache:

<filesMatch ".(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>