Timestamping Your CSS

Posted on May 1st, 2008, by Cristian in Xhtml & CSS

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?

One comment

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

Leave a comment

Advertise / Sponsors

Comments RSS Feed

Recent Comments

  • Alex: try this: #style { -webkit-width:900px; } worked for me
  • Cristian: I am not modifying the core files. What I post as example is part from a module that observer an event and...
  • Magnus_A: Great idea. I am searching for a payment option that will allow me to add a handling fee to the order. In...
  • Cristian: Yes, is tru the plugin doesn’t support that. But also I think that you are able to control level 2...
  • donny: Hi Christian, thanks but what i miss a sub menu unter a submenu. I have a horizontal structure with 5 op...