Autoprefixer
Parse CSS and add vendor prefixes to CSS rules using values
from the Can I Use.
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 the data on current browser popularity
and properties support to apply prefixes for you:
a {
-webkit-transition: -webkit-transform 1s;
transition: -ms-transform 1s;
transition: transform 1s
}
Twitter account for news and releases:
@autoprefixer.
Sponsored by Evil Martians.
Translations
Документация на русском: habrahabr.ru/company/evilmartians/blog/176909
Features
Forget about prefixes
The best tool is a tool you can't see that does the work for you.
This is the main idea behind Autoprefixer.
Autoprefixer interface is simple: just forget about vendor prefixes
and write normal CSS according to latest W3C specs. You don’t need
a special language (like Sass) or special mixins.
Because Autoprefixer is a postprocessor for CSS,
you can also use it with preprocessors, such as Sass, Stylus or LESS.
Actual data from Can I Use
Autoprefixer uses the most recent data from Can I Use,
understands which browsers are actual and popular and adds only the necessary
vendor prefixes.
It also cleans your CSS from old prefixes (like prefixed border-radius
,
produced by many CSS libraries):
a {
-webkit-border-radius: 5px;
border-radius: 5px
}
compiles to:
a {
border-radius: 5px
}
Fast
Autoprefixer is about 50 times faster than Compass and 10 times faster
than Stylus.
On a Core i7 with 10 GB of 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)
Unlike -prefix-free, Autoprefixer compiles CSS once on deploy and doesn’t hit
client-side performance.
Rewrite syntax
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 code by latest W3C specs and Autoprefixer will produce the code
for old browsers:
a {
display: flex;
}
compiles to:
a {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex
}
Browsers
You can specify the browsers you want to target in 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 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);
Inspect
You can check which browsers are selected and which properties will be prefixed:
inspect = autoprefixer("last 1 version").inspect();
console.log(inspect);
Usage
Ruby on Rails
Add autoprefixer-rails gem
to Gemfile
and write CSS in a usual way:
gem "autoprefixer-rails"
Middleman
Add middleman-autoprefixer
gem to Gemfile
:
gem "middleman-autoprefixer"
and activate the extension in your project’s config.rb
:
activate :autoprefixer
Ruby
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)
Grunt
You can use the
grunt-autoprefixer
plugin for Grunt. Install the npm package and add it to Gruntfile:
grunt.loadNpmTasks('grunt-autoprefixer');
Mincer
To use Autoprefixer in Mincer,
install autoprefixer
npm package and enable it:
environment.enable("autoprefixer");
Node.js
Use autoprefixer
npm package:
var autoprefixer = require('autoprefixer');
var prefixed = autoprefixer.compile(css);
JavaScript
You can use Autoprefixer in the browser or a non-Node.js runtime
with standalone version.
Rework
Autoprefixer can be also used as a
Rework
filter, so you can combine it with other filters:
rework(css).
use( autoprefixer.rework(['> 1%', 'opera 12.5']) ).
use( rework.references() ).
toString();
Sublime Text
You can process your styles directly in Sublime Text with the
sublime-autoprefixer
plugin.
Others
You can use the autoprefixer
binary to process CSS files using
any assets manager:
sudo npm install --global autoprefixer
autoprefixer *.css
See autoprefixer -h
for help.