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

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.