Aggressive Stylesheet Caching in Firefox

Album Cover: The Future

"Love's the only engine of survival."
Leonard Cohen / The Future

Posted on September 02, 2004 9:24 AM in Browsers
Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

When I loaded up my website today on a different computer than the one I posted from last night, I noticed that the new CSS rule I defined for the "view all" link in the sidebar had not been respected by my browser. Because I had seen this happen numerous times before with Firefox, I knew the solution. I clicked the reload button and all was well.

Just because I know the solution, though, doesn't make the problem any less annoying. It is my understanding that whenever a web page is loaded by a browser, its last modified timestamp is checked against the timestamp of the file cached on disk (if any). If it exists on disk and has not changed, it is loaded from the cache to speed up retrieval time. If the file on the server is newer than the one in cache, it will retrieve the new file.

Why this doesn't seem to hold true for CSS files is beyond me. I've gotten pretty used to web designers warning their visitors that they'd better reload the page if they want to see a new stylesheet in action. It seems to me like Firefox (and perhaps other browsers?) is being too aggressive about caching CSS files. I did a quick search on Bugzilla, though, and it looks like maybe I'm the only one who feels that way.

Comments

Alexander Kiel on October 21, 2004 at 7:24 AM:

I have this problem, too. Another thing is that firefox do not load the page from the server if the user presses the back button.

Permalink

F. Smtih on August 08, 2005 at 10:24 AM:

Just because you posted this in 2004 doesn't mean the problem was fixed yet. I still experience the same issues. It makes it extremely annoying to test and verify changes. I haven't seen much useful info on the matter either.

Permalink

Agent on November 02, 2005 at 2:58 AM:

Firefox is crap.

Permalink

Gordon McCreight on April 09, 2006 at 3:45 PM:

One way to eliminate this issue is to change the name of the stylesheet when you need to be sure that people's browsers get the latest one. Aggressive caching can be a great thing... saves bandwidth and speeds page loads. Just itterate a number on the stylesheet's filename to force all browsers to get the new one.

Similarly, if you need to make sure images don't get cached, you can add a random string after the image URI. Like... src="myimage.png?jnsfwq". Of course, you'd need to do just a bit of server side scripting to do this, but using a post processing filter on all web content (aka the type of thing that HTML::Mason has) does the trick very easily. I'm not totally sure, but even just adding the question mark at the end might do the trick. It tells the browser that you might be hitting server-side script, so actually check it.

Cheers - Gordon

Permalink

Mikkel Breum on October 27, 2007 at 1:23 PM:

you can open the tylsheet url directly in a seperate tab, and the reload that every time you need to recache the css file in firefox, annoying but works..

Permalink

Mikkel Breum on October 27, 2007 at 1:27 PM:

just found this, it seems to work magic: http://www.ovelha.org/pasteler0/2007/02/25/css-refresh/

Permalink

Etienne Le Sueur on August 04, 2008 at 6:18 PM:

This has become even more a problem with Firefox 3...

Even pressing the refresh button does not flush the cache it has of some css files.

Loading the CSS file in a separate window and refreshing does not reveal changes made to the serverside file.

Firefox doesn't even send headers to the server, it just uses its local copy... After a few minutes of refreshing, it finally expires its local cache and makes a request to the server.

Permalink

Dirk on August 12, 2008 at 1:11 AM:

I agree, I made some essential changes in the ccs recently, now many visitors using Firefox are reporting erronous display of items, because their browser insists on using the previous version of the stylesheet.

Permalink

Perry on May 15, 2009 at 6:34 PM:

The real solution is for your web server to state an explicit expiration time (and date). Firefox is indeed guessing but that is partly because few web servers take advantage of all that http offers.

Permalink

Nanamin on August 10, 2009 at 12:23 PM:

nearly 5 years later and this is still a problem.

Permalink

Lance Flavell on August 10, 2009 at 6:47 PM:

Firefox is ahead in pretty much every other area except this one. The issue has got worse, not better with recent versions and the only reason I'm not calling it a conspiracy is that there's absolutely no reason anyone would deliberately make css caching so stupid.

The only working solution I've heard of is to rename css files. But this sucks. It's annoying, you have to delete previous ones, it means multiple cache of those previous versions in peoples browsers etc.

The solution of saying rel="nofollow" href=mystyle.css?version=xxx does not work.

Permalink

ibrar on September 09, 2009 at 11:34 AM:

it's not a big deal !
click Tool -> Clear Recent History or directly press (Ctrl+Shift+Del)
select cache and remove your old cache
it'll solve ur problem

Permalink

Joel on February 12, 2010 at 7:22 AM:

In Firefox, hold shift and click the refresh button. This will force a reload of the page and its contents.

Permalink

Nikki on January 05, 2011 at 4:05 PM:

"Not a problem," sure - but when your clients are always asking why the page looks wrong because they don't know to refresh each time they visit during a project under development, it gets pretty frustrating.

It's 2011 now - people have been frustrated by this problem for several, several years.

Permalink

Tony on June 22, 2011 at 6:52 AM:

The Mozilla team considers this a feature, not a bug. They're listening to web developers about as well as Microsoft anymore...

Permalink

Anon on July 09, 2011 at 11:14 AM:

There should offer a another feature to turn off caching for *.css files, atleast by URL. It's time consuming when web developing, Refresh doesn't refresh the new CSS file >.<

Permalink

Post Comments

If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.

Name:

Email Address:

Website:

Comments:

Check this box if you hate spam.