Autoprefixer

Parse CSS and add prefixed properties and values from Can I Use database for actual browsers.

Write your usual CSS code without prefixes (forget about them at all, Autoprefixer will think for you):

var css = 'a { transition: transform 1s }';
var prefixed = autoprefixer.compile(css);

Autoprefixer uses a database with current browser statistics and properties support to add prefixes automatically:

a {
  -webkit-transition: -webkit-transform 1s;
  -o-transition: -o-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s
}

Sponsored by Evil Martians.

Translations

Документация на русском: habrahabr.ru/company/evilmartians/blog/176909

Features

• You write normal CSS (or use Autoprefixer after Sass, Stylus or another preprocessor).
• You write normal properties (not special mixins), so you don’t need to remember which properties needs to be prefixed.
• Autoprefixer uses only necessary prefixes. You choose which browsers (by default the last 2 versions for each browser). Did you know, that prefixes for border-radius have not been necessary for a long time now?
• The properties and browsers database is updated automatically (from Can I Use), so prefixes will always be up-to-date (scripts don’t have holidays or work).
• Removes outdated prefixes to clean libraries and legacy code.
• It also adds prefixes to values. For example, to calc(1em + 5px) or to property names in transition.

Browsers

You can specify browsers for your project (by default, it’s last 2 versions):

autoprefixer.compile(css, ["last 1 version", "> 1%", "ie 8", "ie 7"]);

• last n versions is last n versions for each browser (for example, Google also uses “last 2 versions” strategy).
• > n% is browser versions, whose global usage statistics is more than n%.
• You can also set browsers directly.

Blackberry and stock Android browsers will not be used in last n versions or > n% selects. Add them by name if you need them:

autoprefixer.compile(css, ["last 1 version", "bb 10", "android 4"]);

Usage

Ruby on Rails

Add autoprefixer-rails gem to Gemfile and write CSS in usual way:

gem "autoprefixer-rails"

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 grunt-autoprefixer plugin for Grunt. Install npm package and add it to Gruntfile:

grunt.loadNpmTasks('grunt-autoprefixer');

Node.js

Use autoprefixer npm package:

var autoprefixer = require('autoprefixer');
var prefixed     = autoprefixer.compile(css);

JavaScript

You can use Autoprefixer in browser or non-node JS runtime with standalone version.

Rework

Autoprefixer can be also as Rework filter, so you can can combine it with other filters:

rework(css).
    use( autoprefixer.rework(['> 1%', 'opera 12.5']) ).
    use( rework.references() ).
    toString();

Others

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.

Sublime Text

You can process your styles directly in Sublime Text by sublime-autoprefixer plugin.