CSS Framework that automatically handles vendor prefixes?

Go To StackoverFlow.com


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?


2012-04-04 18:59
by D-Nice
Have you looked at Compass (Sass framework) - steveax 2012-04-04 21:32
Yea, I looked at compass too and didn't see any solution included - D-Nice 2012-04-05 04:35
From the Compass Docs - Compass Core Framework - Imports: CSS3 – Provides cross browser CSS3 mixins that take advantage of available pre-spec vendor prefixes.steveax 2012-04-06 01:18
Perfect. Compass is working great - D-Nice 2012-04-09 19:51


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 {

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

2012-04-04 20:05
by ryankeairns


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('box-shadow','2px 2px 5px 0 rgba(0,0,0,.6)');
.pf('flex', 1);
2012-07-21 15:04
by Sergej Jevsejev
That link looks like your own blog. You might want to mention it in the answer if it is - Flexo 2012-07-21 18:36