Scott Boms

Caching CSS

The browser cache is both our friend and our enemy. As web designers and/or developers the cache is our friend because it’s useful for making sites render faster and therefore seem more responsive to the end user, but it’s our enemy because can wreak havoc when changes to a CSS file are made and the browser doesn’t want to let go of the old, cached version.

It’s a pain to have to clear your cache all the time to make sure changes are working as expected during development as well as after deployment to a live environment. Thankfully there is a nice, simple solution aside from sending no-cache headers, which I’ve found don’t always work. I’ve used it myself on a number of occasions and have seen it used elsewhere.

So what is it you ask?

Simply add a post-style variable parameter to the end of the link to your stylesheet(s). I like to use a version numbering type scheme myself. Something like www.yoursite.com/css/main.css?v=1.000. This keeps the browser from caching the CSS file, ensuring that the browser is grabbing the right version without having to clear caches and restart browsers.

So say you…

Doesnt shift + refresh to force a complete reload on most browsers. I know this works for Safari and Firefox, plus Camino at least.

John Anthony Evans John Anthony Evans February 18, 2006

Really? Either I’ve completely forgotten about that or never knew that. Weird. A good tip for sure though!

Scott Scott February 18, 2006

I think it’s actually cmd+refresh (or cmd+r, ctrl+r in Windows) that forces a refresh.

Jeff Smith Jeff Smith February 18, 2006

I think it’s actually cmd+refresh (or cmd+r, ctrl+r in Windows) that forces a refresh.

Jeff Smith Jeff Smith February 18, 2006

I’m confused - do I have to type all that out to force a refresh of my browser’s cache? That seems really inefficient, and there’s way to many sexual references.

Darren Darren February 23, 2006

Hmmm… Damn spammers… All better now. What a nuisance!

Scott Scott February 23, 2006