CSSrefresh for Fast and Effective CSS Testing

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…

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Sulman

    My new css dev tool! But if you’re developing “below the fold” it jumps to the top of the page and you have to scroll down to see the changes. Shame as otherwise it would be mega-dupa-tastic.
    Thanks for highlighting it though :)

  • Andrew

    How is that better than just modifying the CSS in the browser’s built-in developer tools?

    • http://www.optimalworks.net/ Craig Buckler

      You can do that, but then you need to save the resulting code to a file — that’s not possible in all browsers. If you accidentally close your tab or refresh all your changes disappear forever! Also, you can’t edit or test vendor-prefixed properties for other browsers. It’s fine for quick editing of a few properties, but a little risky for larger edits.

  • http://limeblast.co.uk/ Daniel Hollands

    This is good, but I prefer http://sofresh.redpik.net/

    • Sulman

      SoFresh is very good. And doesn’t jump the page to the top on refresh like CSSRefresh does. I’ll probably use SoFresh instead.

      • Sulman

        Ahh rubbish. They both jump to the top in Firefox (my browser of choice) but not in Chrome.

  • http://www.codeconquest.com Charles @ CodeConquest.com

    I recommend dabblet.com for instant CSS coding. It’s not a solution for editing a live website like CSSrefresh, but it is good for testing out quick stuff with CSS and HTML and having the result update in real time. I find myself using it a lot.

  • http://visualiswebdesign.com Al

    Personally, I use Firebug to see instant changes. If I like the results, I incrementally modify the css file. Granted, I do have to skip around different tags in Firebug’s console to copy and paste the style attributes to the css file, but I’ve become quite efficient doing things this way.

  • http://Keithjamesdesigns.com Keith James

    I prefer to just use Code Kit. Yes it is a paid solution but it is only $25 USD.

  • http://- BEHZAD MAHVELATI

    Hi thanks , SoFresh is very good. CSSrefresh is a great solution from web engineer.

  • Willis

    I use code-kit on my Mac to do this, it also compiles the .less file (among many other features)

    • Phil

      +1 for Code Kit. One of the most worthwhile pieces of software I’ve ever purchased.

  • Damien

    I’m using LiveReload on my Mac, does basically the same thing but also refreshes CSS for pre-defined folders (no need to add the script).

  • http://www.joshmoncrieff.com Josh

    I’ve personally been using LiveReload, available on the Mac App Store. But regardless of the option used to achieve this feature, I can certainly vouch for how much time is saved by not having to manually refresh after every change!

  • Efren Martínez

    Awesome, i will try inmediatly, Thanks !!

  • Ed Brown

    I use Stylizer. Stylizer downloads any sites CSS file and allows you to view the site in a choice of browsers. In real time you can create and edit rules, modifing the CSS until it how I want it to look in any of the supported browsers. You can cancel to quit, or hit save (if you have access to the site) to update the CSS file which is then instantly applied to the site. Well worth the price they ask. Excellent and responsive support if you need it.

  • Mark

    I have been using Fresh Css from Noobiesoft, it only reloads the stylesheet that is modified on demand, it does not pole every second and as far as I know you dont get that scroll problem that @Sulman was talking about. Does the same thing but with support for FTP and you can browse your css files from within it to easily find what css file you need quick, its free but the FTP support is a paid for feature.

  • http://mailconcept.net bobby

    Wonderful, it takes the hassle out and input the convenience. Great tutorial!

  • http://www.iks-boats.com captainnord

    Very cool work ! I was looking for this kind of code since a long time .. :)

  • http://goodwebdesign.co GWD

    been using this for ‘ages’ can’t work without it. Such a time saver…

  • http://www.gigstask.com Salman Zaib

    Awesome post with great information about CSS. thanks keep it up !

  • Andy Hill

    Just use http://www.stylizerapp.com/, been using it for years, best money I ever spent, saves you hours a month…

  • Luke Bond

    If developing in Chrome, just hit F9 rather than F5. Built in browser CSS reloading…

  • http://mintik.com Ali

    Very good a news. Thanks.