CSS Framework that automatically handles vendor prefixes? - css

Question

I've looked at Blueprint, Less, and SCSS and none of them appear to do what I want. I find this difficult to believe because handling vendor prefixes is the most frustrating part of writing CSS, so it would appear to be to be the first problem anyone who writes a CSS framework ought to address.
I want to know, is there a framework (or rails gem) that I can use, that allows me to write border-radius:5px and then let's me assume that it will create a rule with all the proper vendor prefixes?
Thanks

Answer 1

You can actually do this quite easily with a LESS Mixin - basically you write it once and from there on out you apply it with one line. Like this:
// Border Radius
.border-radius(#radius: 5px) {
-webkit-border-radius: #radius;
-moz-border-radius: #radius;
border-radius: #radius;
}
Then you symply do this one-liner where you need a border radius:
.classname {
.border-radius(5px);
}
If you are not ready for LESS, then you could just process your code through Prefixr - it generates the browser prefixes for you (then you have to copy paste the code back into your file).

Answer 2

you can use that: http://sjevsejev.blogspot.com/2012/07/lessjs-function-generates-prefixes-for.html
then it would be enough to use:
.pf('transition','all 1s ease-in-out');
.pf('border-radius',3px);
.pf('box-shadow','2px 2px 5px 0 rgba(0,0,0,.6)');
.pf('flex', 1);

Answer 3

Perhaps a recently published collection of scss to css vendor prefix repository might be of interest, following is pulled from the border-radius.scss file...
#mixin border-radius($value) {
#include render-vendor-prefixes(
$property: border-radius,
$value: $value,
$vendor-list: (
-webkit, // Android 2.1, Chrome 5.0/4.0, iOS 3.2-, Safari 5.0/3.1,
-moz, // Firefox 4.0/3.0
),
$prefix: property,
);
}
Using the above #mixin could look like...
#import '_scss/modules/vendor-prefixes/lib/map-vendor-prefixes.scss';
#import '_scss/modules/vendor-prefixes/lib/render-vendor-prefixes.scss';
#import '_scss/modules/vendor-prefixes/calc.scss';
.something {
#include border-radius(10% 30% 50% 70%);
}
... and for completeness, the above complies to...
.something {
-webkit-border-radius: 10% 30% 50% 70%;
-moz-border-radius: 10% 30% 50% 70%;
border-radius: 10% 30% 50% 70%;
}