Css file caching

Question

I have a system where cache max-age is set to 0 and there is problem, when I have made some changes in my style.css fail the changes dont apear to client. Browser will use the old cached version of css. I have simple question: Does naming css file as style.css?123 will be cached as a new?

Answer 1

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

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

main-v1.css main-v2.css main-v3.css

And then re-reference it in your pages. This saves bandwidth and forces browsers to reload it.

Answer 2

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

Answer 3

Yes, adding a unique query string to the resource's URI will force the client to fetch a "fresh" version (since the client doesn't know that it's merely an update of a previously cached resource). This is known as fingerprinting and you typically use a timestamp or an incrementing version number¹ of the CSS file.

Google Web Fundamentals has a great article on HTTP cache optimization. Especially the section titled "Invalidating and updating cached responses:"

How do you get the best of both worlds: client-side caching and quick updates? You change the URL of the resource and force the user to download the new response whenever its content changes. Typically, you do this by embedding a fingerprint of the file, or a version number, in its filename—for example, style.x234dff.css.

Do note, that the fingerprint does not need to be a sequential number. Any value – hash, version, etc. – will do as long as the risk of collisions is limited.

---

¹⁾ This is what's done here on SO, e.g. http://sstatic.net/js/global-login.js?v=12

Answer 4

You can trick the browser into thinking it's a new stylesheet every second by timestamping your CSS:

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

Which will give you this:

<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?