Paul Irish

Making the www great

The Refresh CSS Bookmarklet -or- How to Iterate Quickly When Debugging CSS

firebugscreen.PNGFirebug is my tool of choice to fiddle with CSS. I’ll edit the elements on the page, and then copy my changes back to the .css file. Then save.

If you’re in a webapp, refreshing the page could take a while, so here’s a great way to reload the freshest copies of the stylesheets. Drag this bookmarklet link to your toolbar:

>>> Refresh CSS <<<

Clicking it will modify any <link rel="stylesheet"> tags and append a timestamp at the end of each href attribute, thereby dropping the cache and grabbing a new one. It’s quick and beautiful.

You Must Restart Your System

In the 10 years that I’ve seen dialogs like these, I’ve always clicked “No” or “Restart Later” and the software ALWAYS works. The software installs indicate it’s mandatory, but never is it functionally mandatory. Not TortoiseSVN, ISO mounting utilities, not even Microsoft Office; it always works without a reboot.

So why is this pattern so widely adopted?

Automate Firing of Onload Events

I’ve often had to set up onload events that execute for only a single page. I’ve both hardcoded those function calls right into the markup and I’ve done page detection in a shared js file (parsing the current URL, ew!). Neither solution is rather pretty. The below solution keeps things unobtrusive.

Set up the body tag with an ID that identifies the page, such as:

1

<body id="homepage">

Over in your javascript, set up your page init code in an object literal:

1
2
3
4
5
6
7
8
9
10
11
12

var siteNameSpace  = {
   homepage : {
      onload : function(){
         // do this stuff.
      }
   },
   contact : {
      onload : function(){
         // onload stuff for contact us page
      }
    }
};

Your document ready code executes for the same for all pages:

jQuery:

1

$(document).ready( siteNameSpace[ document.body.id ].onload );

Prototype:

1

Event.observe(window, 'load', siteNameSpace[ document.body.id ].onload );

YUI:

1

YAHOO.util.Event.onDOMReady( siteNameSpace[ document.body.id ].onload );

However this will fail if that object (and onload function) are not defined. But you can fix it with a little more code..

1
2
3
4
5
6
7
8
9

//jQuery version
$(document).ready(
  function(){
    var NS = window.siteNameSpace, bID = document.body.id;
    if(NS && NS[ bID ] && (typeof NS[ bID ].onload === 'function')){
      NS[ bID ].onload();
    }
  }
);
2009.03.11 I’ve put this technique on steroids, now. Check out Markup-based unobtrusive comprehensive DOM-ready execution