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:
ExpiresByType text/css M1
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.