Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website.
Write your CSS rules without vendor prefixes (in fact, forget about them entirely):
var css = 'a { transition: transform 1s }';
var prefixed = autoprefixer.compile(css);
Autoprefixer uses a database with current browser popularity and properties support to apply prefixes for you:
a {
-webkit-transition: -webkit-transform 1s;
-o-transition: -o-transform 1s;
transition: -ms-transform 1s;
transition: transform 1s
}
Twitter account for news and releases: @autoprefixer.
Sponsored by Evil Martians.
Документация на русском: habrahabr.ru/company/evilmartians/blog/176909
Best tool, is a tool, that you can’t see, but it’s work. This is a main idea behind Autoprefixer.
So Autoprefixer interface is simple: just forget about vendor prefixes and write normal CSS by latest W3C specs. You don’t need special language (like Sass) and special mixins.
Because Autoprefixer is postprocessor and doesn’t depend on styles language, you can also use it with Sass, Stylus or LESS preprocessors.
Autoprefixer uses latest database from Can I Use, understands what browsers is actual and popular and adds only necessary vendor prefixes.
Also it cleans your CSS from old prefixes (like unnecessary border-radius
from a lot of CSS libraries):
a {
webkit-border-radius: 5px;
border-radius: 5px
}
compiles to:
a {
border-radius: 5px
}
Autoprefixer is about 50 times faster, than Compass and 10 times faster, than Stylus.
On Core i7, 10 GB RAM and SSD, benchmark with GitHub styles is:
~/Dev/autoprefixer$ ./node_modules/.bin/cake bench
Load GitHub styles
Autoprefixer: 257 ms
Compass: 13626 ms (53.0 times slower)
Rework: 213 ms (1.2 times faster)
Stylus: 2596 ms (10.1 times slower)
Flexbox or gradients have different syntaxes in different browsers (sometimes you need to recalculate angles, sometimes you need 2 old properties instead of new one), but Autoprefixer hides this from you.
Just write code by latest W3C specs and Autoprefixer write code for old browsers:
a {
display: flex;
}
compiles to:
a {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex
}
You can specify browsers for your project (by default, it’s last 2 versions
):
autoprefixer("last 1 version", "> 1%", "ie 8", "ie 7").compile(css);
-
last n versions
is last versions for each browser. Like “last 2 versions” [strategy]((http://support.google.com/a/bin/answer.py?answer=33864) in Google. -
> n%
is browser versions, selected by global usage statistics. -
none
don’t set any browsers to clean CSS from any vendor prefixes. - You can also set browsers directly.
Blackberry and stock Android browsers will not be used in last n versions
.
You can add them by name:
autoprefixer("last 1 version", "bb 10", "android 4").compile(css);
You can check, what browsers is selected and what properties will be prefixes:
inspect = autoprefixer("last 1 version").inspect();
console.log(inspect);
Add autoprefixer-rails gem
to Gemfile
and write CSS in usual way:
gem "autoprefixer-rails"
You can integrate Autoprefixer into your Sprockets environment
by autoprefixer-rails
gem:
AutoprefixerRails.install(sprockets_env)
or process CSS from plain Ruby:
prefixed = AutoprefixerRails.compile(css)
You can use grunt-autoprefixer plugin for Grunt. Install npm package and add it to Gruntfile:
grunt.loadNpmTasks('grunt-autoprefixer');
Use autoprefixer
npm package:
var autoprefixer = require('autoprefixer');
var prefixed = autoprefixer.compile(css);
You can use Autoprefixer in browser or non-node JS runtime with standalone version.
Autoprefixer can be also as Rework filter, so you can combine it with other filters:
rework(css).
use( autoprefixer.rework(['> 1%', 'opera 12.5']) ).
use( rework.references() ).
toString();
You can process your styles directly in Sublime Text by sublime-autoprefixer plugin.
You can use autoprefixer
binary to process CSS files in any assets manager:
sudo npm install --global autoprefixer
autoprefixer *.css
See autoprefixer -h
for help.