Menu
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" />
257
Timestamping Your CSS To prevent the caching of their scripts, they add a timestamp to the end of the src attribute.
Unless you've messed with your server, yes it's cached. All the browsers are supposed to handle it the same. Some people (like me) might have their browsers configured so that it doesn't cache any files though. Closing the browser doesn't invalidate the file in the cache.
Firefox should cache, however, this could be due to a weak validation i.e. no usage of Etag. Using Etag forces strong validation of the cache-control mechanism for Firefox. Firefox tries to follow the RFC 2616 section 13.3.2. If the file has not changed on the server you should see a response of 304 Not Modified.
You hover over this icon and Firefox shows you a message telling you why the CSS isn’t working: The message tells you the reason the width and height properties are inactive on this element is because its display type is set to inline. Firefox recommends switching to display:inline-block;.
It hinted to older versions of FireFox not caching any resources with query strings. However some of the users answered that the issue had been fixed in newer versions.
However IE and Chrome do cache based off the Cache-Control and Expires headers. Firefox should cache, however, this could be due to a weak validation i.e. no usage of Etag.
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.
157
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" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
