Geek Answers Handbook

Why does Firefox sometimes cache my CSS and Javascript code, even if it has changed?

On my product site, Firefox sometimes โ€œfails to detectโ€ changes in my CSS and Javascript code. Rather, it downloads older versions, so it seems like I need to clear the cache. In such a situation, what should I do? This applies to the latest Firefox (16.0.1 at the time of this writing).

CHANGE!

I forgot to say that these are errors for localhost css files. I mean, theres an old js file, I update it, load it, and on the firefox product server thinks it is a localhost file. The way to include files:

<link rel="stylesheet" href="/xyz.css" type="text/css" />
+6
source share
7 answers

If you use the server language, you can use the trick. You can add a line 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 on busting .

+10
source

You can use a technique called "cache overflow" where you attach a query string to your call to your css / js file. Then you update the query string whenever you update your css / js.

Example:

 <link rel="stylesheet" type="text/css" href="/styles.css?ver=1" />
+9
source

As mentioned in several other answers, you want to have a unique identifier for your static assets based on the content, that is, the identifier changes if and only if the content changes. Thus, browsers can still use the cached version of the resource until the content has changed - this is exactly what you want. This method is called the static asset version.

Therefore, do not use the current time or a random number / string. If you can, use either the file modification time or the (better) hash of the md5 file of its contents. You can add this identifier to the query string (which will be ignored) or ( better ) add it to the file name before the extension.

To counter this and eliminate confusion in the busting caching method mentioned in some other answers: cache busting is a method used by advertisers to force the browser to always reload the property so that the advertiser can measure the number of ad impressions by the number of resource requests. This is easy to do using a random number. Usually you do not want to use this for your static assets.

+3
source

You can add a version at the end of css / js that you submit in different ways.

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

+2
source
  • You can use the meta tag to force updates. <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 add a random query string to your CSS and JavaScript files.
+2
source

I just want to clear the cache or hard update (Ctrl + F5).

Another option is to simply change the JS or CSS file name so that FF does not recognize it as a cached file (for example, rename style.css to style2.css).

+1
source

style.css?randomnumber will support loading

+1
source

More articles:


All Articles