Why does Firefox sometimes cache my CSS & Javascript code, even though it has changed?

Question

On my product site, Firefox sometimes \"doesnt detect\" changes in my CSS & Javascript code. Rather it loads the old versions, so it seems that I need to clear the cache

Answer 1

Just gotta clear the cache or hard refresh (Ctrl+F5) I'm afraid.

Another option is to simply change the file name of the JS or CSS file so that FF doesn't recognize it as a cached file (e.g. rename style.css to style2.css).

Answer 2

style.css?randomnumber will asure the loading

Answer 3

As mentioned in several other answers you want to have a unique identifier for your static assets based on the content i.e. the identifier changes if and only if the content changes. That way browsers can still use a cached version of a resource as long as the content hasn't changed - which is exactly what you want. This technique is called static asset versioning.

So don't use the current time or a random number/string. If you can, either use the modification time of the file or (better) the md5 hash of its contents. You can append this identifier as a query string (which will be ignored) or (better) append it to the filename before the extension.

To contrast this with and clear the confusion about the technique of cache busting mentioned in some other answers: cache busting is a technique used by advertisers to force the browser to always reload a resource so the advertiser can measure the number of ad impressions by the number of times the resource is requested. This is easily accomplished by using a random number. You don't normally want to use this for your static assets.

Answer 4

You can append a version at the end of the css/js you send accross.

For Example

Instead of www.foo.com/js/javascript.js, send www.foo.com/js/javascript.js?v=1 and
Instead of www.foo.com/css/style.css, send www.foo.com/css/style.js?v=1

Answer 5

• You can use a meta tag to force the refreshing. <meta http-equiv="Cache-control" content="no-cache">, or <meta http-equiv="pragma" content="no-cache">.
• You can force the HTTP header: Cache-control: no-cache or Pragma: no-cache.
• You can append a random query string to your CSS and JavaScript files.

Answer 6

If you are using a server-side language you could use a trick. You can append a string after .css/.js. In PHP for example:

<link rel="stylesheet" type="text/css" href="/style.css?t=<?= time(); ?>" />

It changes every page reload.

Take a look at this article about cache busting.