File Under: CSS

Dabblet: An Interactive CSS ‘Playground’ in Your Browser

Dabblet: Live CSS editing (even better with monkeys)

CSS guru Lea Verou has unveiled a new project, Dabblet, which she describes as “an interactive CSS playground.”

Inspired by online editors like JSFiddle, Dabblet is an interactive testing app for CSS — write some code and instantly see the results in the same window. The site works in most modern web browsers, including Chrome, Firefox and Safari (Opera support is in the works).

Unlike JSFiddle where the emphasis is clearly on JavaScript, Verou’s app is designed from the ground up to focus on CSS. Among Dabblet’s nice features are automatic vendor prefixing for CSS 3 properties (via Verou’s -prefix-free library). The prefix-free script means you can just write, for example, border-radius instead of -moz-border-radius, -webkit-border-radius, -o-border-radius and so on.

Perhaps the most useful feature though is that Dabblet can save all of your work as GitHub gists. Not only those that making sharing your work with others easier it also ensure that even if Dabblet doesn’t last forever you’ll still have your data on GitHub.

The Dabblet source code is available on GitHub if you’d like to contribute or fork it for you own project (it’s licensed under the NPOSL 3.0 which carries a non-profit restriction).

Dabblet is simple to use, just dive in and start writing some code. However, not all of the advanced features are immediately obvious so if you’d like to see a kind of guide to Dabblet, head over to Verou’s blog where she has a basic screencast that shows Dabblet in action.