I’ve come up with a very simple solution to the problem of browser-cached CSS files. What I mean by this is: when you update the CSS which manages your website’s presentation, it will take a while before some visitors actually see those changes. The reason, of course, is that browsers (this is at least true of IE and Firefox) will cache CSS files pretty aggressively, without checking very often to see if they have been updated. Usually refreshing the page will solve this, but most visitors aren’t going to care enough to do this. Meanwhile, your site will look pretty broken to them (especially if you’ve done something like styled a list so that it looks like a horizontal toolbar instead of a bulleted list, for example).
So here’s the very simple solution. Add the following rule to your root .htaccess file:
RewriteRule ^(.*)\.[\d]\.css$ $1.css [L]
I’m assuming that you have a common include file or template or something which prints things like the page header. If so, whenever you update your CSS file (say, style.css), you update the link tag in your header to use style.0.css. This will look to the browser like it is a different file from style.css, so it will download it again. But Apache is really just loading the same CSS file through the magic of URL rewriting—you’re just ensuring that the user picks up your recent changes. You can repeat the process the next time you tweak your CSS, just change the header to style.1.css and so on.
July 24, 9:51 am
There’s yet another option available: append a bogus query string on the end of the CSS URL. So, your style sheet may become something like:
http://www.vacant-nebula.com/style.css?date=200807240950
Using a time stamp as the value guarantees that it’s unique each time. The great thing about this is you don’t have to remember to update anything (PHP does that for you). I found this useful for forcing an image update in my photo album software.
July 24, 11:06 am
Yeah, I guess that would work too, but that way the browser would have to reload the CSS file with every single page view, even though CSS files don’t change all that often. Unless you are repeating your header code in every page, you’ll only have to update the link tag in one file, and only when you think you’ve made a big enough change that it would look broken with the old CSS. It does have the advantage that you don’t have to mess with .htaccess, but that’s only a one-time thing (I guess you don’t want to do that with something you’d want to redistribute though).
July 26, 5:58 pm
why not just append the mtime of the css file as the bogus query string?
July 27, 11:29 pm
Wouldn’t that still cause the browser to load the CSS file on every page load? I don’t think browsers will cache URLs containing a query string, even if the query string in the next request is identical (I could be wrong about that, I’d have to do some experimenting to be sure). Plus that still seems like more work, you’d have to put code in that accesses the CSS file on the server for each page load.
July 28, 1:31 pm
that’s pretty minimal overhead.