Close

August 21, 2006

An easy fix for unwanted CSS caching

I ran into a nasty little issue with the current version of Firefox (1.5) where it would not pick up changes to a CSS file without having to manually empty the browser cache. Since I noticed this issue on a public web site, having to send out a bunch of “Empty your cache, mmkay?” responses to the site’s visitors wasn’t really how I wanted to spend my week. And yes, probably not that professional either.

I tried handling this scenario via Apache through an .htaccess file using mod_expires. I set mod_expire to tell the browser to consider all css files expired 1 second after they had been modified through the Expire HTTP header, like such:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css M1
</IfModule>

Even though I tested with LiveHTTPHeaders to make sure the Expire header was being sent correctly, it didn’t make a difference in Firefox. Not good.

Finally, I came across Stefan Hayden’s post on “CSS Caching Hack“. Facing a similar situation, he realized you could add a query parameter to the CSS file which would make the browser think it was looking at a new CSS file, even though the file name hadn’t changed.

This works because the browser thinks it is passing a GET request variable to the CSS file, which might cause the CSS file to generate different content – based on the variable’s value.

So for example, you may have a style.css file you currently link to like this:

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

To make browsers think the file has been updated, or may generate new content, change it to something like the following:

<link rel="stylesheet" type="text/css" href="style.css?version=1" />

To follow the pattern, the next time you make important updates to the CSS file, you could change the CSS reference to:

<link rel="stylesheet" type="text/css" href="style.css?version=2" />

Not extremely elegant or transparent, but if you have your CSS references in an include file, it’s pretty easily to implement.

5 Comments on “An easy fix for unwanted CSS caching

Nate Cavanaugh
August 23, 2006 at 5:40 pm

You could do this easily with a sprinkle of javascript.
I wrote a quick function object for you that you can run onload to turn off caching of css.

Give your link rel=”…”
an id such as “the_stylesheet” then include this code into your javascript:
var noCache = {
init: function(){
var neverCache = false;

var ss = document.getElementById(‘the_stylesheet’);
if(!ss){return;}
//this.neverCache = true;
var time = new Date();
var time = time.getTime();
var freshCSS = ss.href+’?’+time;
if(neverCache){
return ss.href = freshCSS;
}
if(location.href.indexOf(‘cache=off’) > 0){
ss.href = freshCSS;
}
}
}

Then just add noCache.init(); to your onload handler.
Basically, you can quickly turn off caching in the query string, by adding this: cache=off (eg http://your-domain.com/index.html?cache=off)
or, you can set the var neverCache = false; to var neverCache = true; and that will make sure it is ALWAYS getting a fresh copy.

Just thought it might be helpful šŸ™‚

jess
August 23, 2006 at 8:14 pm

Cool! That approach is more transparent in the code. The only downside would be users who have JavaScript disabled wouldn’t get the benefit. But given the right scenarios, I do see benefits to approaching it this way.

Thanks Nate!

Nate Cavanaugh
August 24, 2006 at 1:02 pm

True, though I don’t think the users who have javascript turned off are very high (the highest I’ve seen reported is about 10%, but I think more realistic is about 2-3% at the most).

If you’re using php, you could just do it like this as well:

<link rel=”stylesheet” href=”style.css<?php echo ‘?’.time(); ?>” />

but that only works on PHP pages.

Either way it saves it from having to do it manually šŸ™‚

Stefan Hayden
August 25, 2006 at 10:51 am

Nate:

Calling time() in PHP would give a different variable every time. This would cause the CSS to reload on every page load.

The trick is to only have them reload the CSS when there is new code to display.

Sam
March 9, 2011 at 10:39 am

With PHP, you could use the CSS file’s modified datetime as the parameter and that only changes when the file is changed.
<link rel="stylesheet" type="text/css" href="style.css?”/>

Add a Comment