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.