CSSrefresh for Fast and Effective CSS Testing
Most of us develop Cascading Stylesheets using the following technique:
- Open the project URL in a browser.
- Edit some CSS code.
- Hit the browser refresh button.
- Swear.
- 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…