CODEWITHSUNDEEP
htmlcsscachingbrowserassets
John Smith
John Smith

Reputation: 6197

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

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. In a situation like this, what should I do? This relates to the latest Firefox (16.0.1 at the time of this writing.)

EDIT!

I forgot to say it mistakes for the localhost css files. I meant, theres an old js file, I update it, upload it, and on product server firefox thinks its the localhost file. The way I include files:

<link rel="stylesheet" href="/xyz.css" type="text/css" />

Upvotes: 7

Views: 4560

Answers (7)

kynan
kynan

Reputation: 13613

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.

Upvotes: 3

jaco
jaco

Reputation: 3506

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.

Upvotes: 11

Tango Bravo
Tango Bravo

Reputation: 3309

  • 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.

Upvotes: 2

Reflective
Reflective

Reputation: 3917

style.css?randomnumber will asure the loading

Upvotes: 1

Ennui
Ennui

Reputation: 10190

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).

Upvotes: 1

Pranav 웃
Pranav 웃

Reputation: 8477

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

Upvotes: 2

Jared
Jared

Reputation: 12524

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

Example:

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

Upvotes: 9

Related Questions