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…

  • 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?

    • 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.

  • This is good, but I prefer

    • 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.

  • I recommend 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.

  • 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.

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

  • 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).

  • 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.

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

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

  • GWD

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

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

  • Andy Hill

    Just use, 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…

  • Ali

    Very good a news. Thanks.

Get the latest in Front-end, once a week, for free.