HTML & CSS
Article
By Craig Buckler

CSSrefresh for Fast and Effective CSS Testing

By Craig Buckler

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…

Recommended
Sponsors
The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account