Blogs

CSSrefresh for Fast and Effective CSS Testing

Craig Buckler
Share

Most of us develop Cascading Stylesheets using the following technique:

  1. Open the project URL in a browser.
  2. Edit some CSS code.
  3. Hit the browser refresh button.
  4. Swear.
  5. Repeat from step two until completion/failure.

It works, but hitting F5 every few seconds slows you down when you’re in the CSS-zone! There are various solutions for automatically refreshing when a change occurs but most require a specific IDE and/or browser plug-in. Many reload the whole page — not just the CSS.

CSSrefresh is a great solution from web engineer Fred Heusschen. It’s a JavaScript file which you can download and include in your page. Alternatively, you can install the code as a browser bookmarklet and launch it whenever you start CSS development.

Assuming your page is running from a remote or local web server, CSSrefresh uses Ajax to examine every stylesheet file once per second. When the file date/time is modified, the script dynamically loads the CSS file which is applied immediately. It will also work if you’re using LESS, Sass, Stylus or any other CSS pre-processor.

Simple, clever, effective and possibly one of the most useful free development tools I’ve encountered recently. Grab CSSrefresh for yourself…