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…
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
