When developing websites nowadays, we spend a lot of time dealing with CSS, the language of website stylesheets. The usual way this works is you edit the CSS, save the page, open a web browser and look at the changes. Lather, rinse, repeat.

If you use a Mozilla-based browser (Firefox, Camino, or Mozilla itself), you have a much easier option. The Edit CSS bookmarklet from SquareFree.

Bookmarklets are bookmarks, made of JavaScript, that live in your toolbar. You choose the bookmark, and something happens. In this case, a window pops up, loading all the CSS that's affects the page you're viewing. Linked, imported, and embedded stylesheets all load in the window. Edit what you see in the window, and the results are shown instantly in the browser window.

Similar technologies exist in some web editors. On Windows you can tie into the Internet Explorer layout engine with various software (I've heard), and on Mac OS X you can tie into the WebCore engine using BBEdit and numerous other editors. However, neither of these options exists on the other platform. Mozilla works everywhere.

I use BBEdit's preview engine all the time, but the Edit CSS bookmarklet is still one of my favorite tools. Did I mention that it's also free?