CSS Refresh

While developing a web application, I often need to reload a whole site for every change I do in its CSS file, only to test it. Under Firefox I used to change manually the href in links (well, in fact, with Firebug) to add some query string, in order to by-pass the cache and request the brand-new version of the file. This job was often harder than that, since I'm still maintaining some old school applications using frames (Eek!).

While writing my jQuerify Bookmarklet I thought this CSS refresher is the perfect job for a bookmarklet, so I ended writting the CSS Refresh Bookmarklet.

Code action!

(function(){
  var a = [];
  function f(f){
    a = a.slice.call(f.getElementsByTagName('link')).concat(a)
  };
  f(document);
  for(var i = window.frames.length - 1; i > 0; --i){
    f(window.frames[i].document);
  }
  var date = new Date().valueOf();
  for(var i = a.length - 1; i >= 0; --i){
    var s = a[i];
    if(
      s.href &&
      s.rel.toLowerCase().indexOf('stylesheet') >=0 &&
      (!s.sheet || !s.sheet.disabled)
    ){
      var h = s.href.replace(/[&?]_=\d+/,'');
      s.href = h + (h.indexOf('?') >= 0 ? '&' : '?') + '_='+date;
    }
  }
}());

The code is pretty straighforward: It collects every <link> tag in any frame (even the main one) and modifies their href with a dummy parameter. First, the script tries to remove the dummy parameter, in case it exists, and then adds the dummy parameter with the current timestamp, so no two refreshes are equal.

CSS Refresh Download

Now CSS refreshing is only a click away for every project. Nice!

You can download the bookmarklet dragging the next link and dropping into your bookmarks toolbar. I hope it helps you as well as it does to me!

• CSS Refresh Drag and drop onto your bookmarks