CODEWITHSUNDEEP
javascriptcsscachingrefresh
Guigoz
Guigoz

Reputation: 739

Refresh CSS file in cache with ?version=XXX

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 :

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

Thanks for your help!

Upvotes: 11

Views: 14332

Answers (3)

Žiga
Žiga

Reputation: 198

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.

Upvotes: 0

Polyana Fontes
Polyana Fontes

Reputation: 3216

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>

Upvotes: 3

closure
closure

Reputation: 7452

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.

Upvotes: 9

Related Questions