When you are developing a site, there is a heck of a lot of “refreshing” going on. You start to get a pretty good feel for what your browser is going to pick up on a single refresh, and what it won’t. For example, I find that if I over-write an image file on the server, it will take me two refreshes for that image to update on the live site.

There is a little trick to prevent CSS caching that I can be used also on javascript scripts. To prevent the caching I add a timestamp ( I used a Unix Timestamp) to the end of the src link.

<link rel="stylesheet" type="text/css" href="style.css?<?=time()?>" />

Which results in this:

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

The theory here is that that link will change every second, and the browser will be tricked into thinking this is a new stylesheet and loading it fresh every time. Jason Edmond Beaird had the same idea and even created a little bookmarklet to force it.

My tests suggest that it works pretty well. What do you think? Do you know a better/smarter/faster way to do it?

1. Alison on August 20th, 2008 at 12:13 am

   That’s very interesting. However, assuming your style sheet is small this would be a good idea. Or perhaps if you don’t have many pages. But if your CSS style sheet is lengthy and takes a bit to load, the user might see an un-styled page for like .1 seconds, depending on their network speed.

   All in all, I really like the idea, especially if you have a site that you tend to update quite frequently and you have a lot of visitors daily. Nice one!