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!

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!

• javascript
• css
• caching
• refresh

• I'm 99% sure it will be the newer version as they both have the same actual real file name. Can you not test this to just see what happens? – Billy Moat Commented Dec 20, 2012 at 17:02
• Out of curiosity - why do you need to refresh CSS like this? Does it change often? And when it does - shouldn't browser automatically detect the change? – Yuriy Galanter Commented Dec 20, 2012 at 17:03
• @Trekstuff not always. Depends on the information contained in the HTTP header and wether the file is flagged with a expiration date, etc. – Liam Commented Dec 20, 2012 at 17:06
• Why not use ?version=DDMMYYYY everywhere? Just make sure to use the actual modification date of the css file or a static version number (not the current date). – No Results Found Commented Dec 20, 2012 at 17:09
• The answer depends on what expiration headers your server uses/used for the CSS files. – Salman Arshad Commented Dec 20, 2012 at 17:09

3 Answers 3

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.

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>

On my project I also use ?version approach for forcing browser to get new version of CSS file. Instead using ?version=DDMMYYYY I would suggest of using filemtime().

Example:

<link rel="stylesheet" href="css/custom.css?<?php=filemtime('css/custom.css')?>" type="text/css" media="screen" />

Function filemtime() gets file modification time so browser will get the new version of CSS when CSS file is changed. If file is not changed then the time remains unchanged and browser uses cached version of file.