Easy way to add experimental consistently css for multiple browsers?

Question

I was wondering if there was a tool that can "pre-process" CSS and automatically add experimental properties so they'll look the same on browsers that support it. For example, instead of writing:

.class {
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px }

I could just write:

.class {
    border-radius: 8px }

And the others would be automatically added. For border radius it's not too bad, but it is for gradients. To accomplish the same result:

background: -moz-linear-gradient(top, #00abeb, #fff);
background: -webkit-gradient(linear, center top, center bottom, from(#00abeb), to(#fff));

LESS would be perfect if it had a feature like this. Does anyone know of a tool that does have this?

Answer 1

Sounds like the kind of thing that Sass should be able to do.

Answer 2

Looks like I have to read the documentation more carefully. LESS does indeed support this feature. (And it was on the front page!)

Here's a tutorial for the people looking at this question

Answer 3

You could also try Compass. Compass has a CSS3 library premade :) (compass is just a mashup of blueprint framework and SASS)

http://compass-style.org/docs/reference/compass/css3/shared/