Autoprefixer

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

Write your CSS usual 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 will take database with current browser statistics and properties support and adds only actual prefixes:

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 need to be prefixed.
• Autoprefixer uses only really necessary prefixes. You set browsers (by default last 2 version for each browsers). Did you know that prefixes for border-radius are not necessary for a long time?
• Properties and browsers database is updated automatically (from Can I Use), so prefixes will be always actual (scripts don’t have holidays and work).
• It also adds prefixes to the values. For example, to calc(1em + 5px) or to properties names in transition.

Browsers

You can specify browsers actual 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 version” strategy).
• > n% is browser versions, which global usage statistics is more than n%.
• You can also set browsers directly.

Usage

Ruby on Rails

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

gem "autoprefixer-rails"

Ruby

You can integrate Autoprefxier to 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 by standalone version.

Rework

Autoprefixer is a 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.