HTML5 Development Center

Developed for you in part by
 
744-cssrefresh

CSSrefresh for Fast and Effective CSS Testing

By | October 31, 2012 | Browsers | CSS | CSS3 | Open source | Software

24

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…

Learn Responsive Web Design

Join Learnable $29 Includes all SitePoint books

Craig Buckler

Craig is a Director of OptimalWorks, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.

More Posts - Website

Tagged as: CSS, CSS3, developer tools, HTML5 Dev Center

{ 24 comments }

Ali November 25, 2012 at 5:13 pm

Very good a news. Thanks.

Luke Bond November 8, 2012 at 3:43 am

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

Andy Hill November 8, 2012 at 1:52 am

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

Salman Zaib November 5, 2012 at 11:14 am

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

GWD November 4, 2012 at 7:18 pm

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

captainnord November 3, 2012 at 11:21 am

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

bobby November 3, 2012 at 7:41 am

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

Mark November 2, 2012 at 8:01 am

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.

Ed Brown November 2, 2012 at 3:35 am

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.

Efren Martínez November 1, 2012 at 11:01 pm

Awesome, i will try inmediatly, Thanks !!

Josh November 1, 2012 at 5:06 pm

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!

Damien November 1, 2012 at 3:47 pm

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

Willis November 1, 2012 at 12:34 pm

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

Phil November 2, 2012 at 10:48 am

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

BEHZAD MAHVELATI November 1, 2012 at 12:22 pm

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

Keith James November 1, 2012 at 11:13 am

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

Al November 1, 2012 at 10:25 am

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.

Charles @ CodeConquest.com October 31, 2012 at 1:42 pm

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.

Daniel Hollands October 31, 2012 at 11:46 am

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

Sulman November 1, 2012 at 1:55 am

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 November 1, 2012 at 1:59 am

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

Andrew October 31, 2012 at 11:05 am

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

Craig Buckler November 1, 2012 at 12:46 am

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.

Sulman October 31, 2012 at 10:06 am

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 :)

Comments on this entry are closed.