Auto Prefixing

Automatic generation of vendor prefixes for properties, functions, @-rules and even full declarations. This allows you to maintain cross-browser support whilst keeping your source code clean and easy to maintain. 

In some cases (e.g. CSS3 gradients) final syntax is incompatible with older prefixed syntax. In these cases the old syntax is polyfilled so you can use the correct syntax while preserving full support for older implementations. 

Example 1:


.class{
    background: linear-gradient(to right, red, white);
}

Will render as:


.class{
    background: -webkit-linear-gradient(left, red, white);
    background: -moz-linear-gradient(left, red, white);
    background: linear-gradient(to right, red, white);
}

Example 2:


@keyframes bounce {
    50% { transform: scale(1.4); }
}

Will render as:


@-webkit-keyframes bounce {
  50% {-webkit-transform: scale(1.4);
               transform: scale(1.4);}
}
@-moz-keyframes bounce {
  50% {-moz-transform: scale(1.4);
            transform: scale(1.4);}
}
@keyframes bounce {
  50% {-webkit-transform: scale(1.4);
          -moz-transform: scale(1.4);
           -ms-transform: scale(1.4);
               transform: scale(1.4);}
}