auto_update_stylesheets

What does it do?

It watches each of the external stylesheets included on a page. Whenever changes are detected, they are reflected in real-time on the page.

How do I use it?

Just include auto_update_stylesheets.js in your page, and call $.autoUpdateStylesheets() on dom-ready.

OR

Drag this link; to your bookmark toolbar. Click the bookmarklet once to activate it, again to toggle it off.

What are the restrictions/dependencies?

• jQuery is required (NOT FOR THE BOOKMARKLET)
• all stylesheets must be in the same domain as the page they are included on
• you must have access to edit the source stylesheet

What’s the point of this?

My CSS workflow typically involves writing my stylesheets directly in Firefox using the Web Developer Toolbar. I like to see my changes in real-time without having to refresh the page. This has some major shortcomings since Web Deveoper Toolbar is not intended to be text editor. I’d much prefer to use my editor of choice and see the CSS rendering in real-time.

The second big win comes later when I need to fix my CSS in IE. With this script I can open IE, Firefox, and Safari and see how my changes affect each browser in real-time.