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!

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
– 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? — Comfortably Numb
– Comfortably Numb, 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
– 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
– 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
– Salman Arshad, Commented Dec 20, 2012 at 17:09

closure · Accepted Answer · 2012-12-20 17:05:46Z

9

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.

answered Dec 20, 2012 at 17:05

closure

7,4521 gold badge25 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Polyana Fontes · Accepted Answer · 2012-12-20 17:07:30Z

3

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>

answered Dec 20, 2012 at 17:07

Polyana Fontes

3,2221 gold badge30 silver badges43 bronze badges

4 Comments

Guigoz Over a year ago

Thanks for your response, I'll contact my sysadmin in order to see if I can change something in apache conf. If nothing is possible, i'll use your htaccess trick

Guigoz Over a year ago

I don't think your htaccess trick will work. If the file is always in the cache, the server will not be contacted for this file and your htaccess will not be executed. It's usefull only if we don't want a file to be cached, but it will not refresh the file in the browser cache

Polyana Fontes Over a year ago

@Guigoz of course you'll need to clear the cache once or wait until the browser notice the Etag change. But after it's loaded again with the new headers it will be cached with a shorter expiration time. When the file must be downloaded again immediately without user interaction with the browser and the file is already cached with a long expires times, than there's no other way than changing the URI.

Polyana Fontes Over a year ago

@Guigoz but it will not refresh the file in the browser cache the cache headers are there to control the browser cache

Žiga · Accepted Answer · 2014-10-12 10:23:10Z

0

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.

answered Oct 12, 2014 at 10:23

Žiga

1983 silver badges7 bronze badges

Collectives™ on Stack Overflow

Refresh CSS file in cache with ?version=XXX

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related