Css File Caching

Question

I have a system in which the maximum cache age is set to 0, and there is a problem when I made some changes to my .css style, so that the changes are not issued to the client. The browser will use the old cached version of css. I have a simple question: will css file name caching be like style.css? 123?

Answer 1

Yes, adding a unique query string to the resource URI will force the client to get a "new" version (since the client does not know that this is just an update of a previously cached resource). This is called fingerprints , and you usually use a timestamp or incremental version number ^{1 of} the CSS file.

Google Web Fundamentals has a great article on HTTP cache optimization . Especially the section entitled "Invalidity and update of cached responses:"

How do you get the best of both worlds: client-side caching and fast updates? . You change the URL of the resource and force the user to download a new response when changing its content. Typically, you do this by inserting a fingerprint of a file or version number into its file name - for example, a style. x234dff .css.

Remember that a fingerprint does not have to be a sequential number. Any value - hash, version, etc. - will be valid as long as the risk of collisions is limited.

---

¹⁾ This is what is being done here on SO, for example. http://sstatic.net/js/global-login.js?v=12

Answer 2

You can add a unique query string, although this will use bandwidth.

You can rename your CSS file every time you make changes, IE:

Primary-v1.css Primary-v2.css Primary-v3.css

And then re-link to it on your pages. This saves bandwidth and causes the browser to restart it.

Answer 3

yes, adding the querystring parameter in each style.css file style.css make it cache again.
because the browser caches each static component with its own url, so when the url is changed, the new file will be cached.

Answer 4

You can fool the browser by considering it a new stylesheet every second by specifying the timestamps of your CSS:

 <link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of FY h:i:s A'); ?>" /> 

This will give you the following:

 <link rel="stylesheet" type="text/css" href="style.css?Thursday 24th of April 2008 04:45:21 PM" /> 

Taken from: Can we prevent CSS caching?