autoprefixer

What is autoprefixer?

The autoprefixer npm package is a PostCSS plugin that parses your CSS and adds vendor prefixes to CSS rules using values from Can I Use. It is a tool that automates the process of adding vendor prefixes to CSS rules to ensure cross-browser compatibility.

What are autoprefixer's main functionalities?

Adding vendor prefixes

This feature automatically adds necessary vendor prefixes to CSS rules. The code sample shows how to use autoprefixer with PostCSS to process a CSS string that includes the 'display: flex;' rule, which then outputs the rule with the appropriate vendor prefixes.

const autoprefixer = require('autoprefixer');
const postcss = require('postcss');

postcss([ autoprefixer ]).process('a { display: flex; }').then(result => {
  console.log(result.css);
  // Output: 'a { display: -webkit-box; display: -ms-flexbox; display: flex; }'
});

Customizing browser support

Autoprefixer allows customization of the browsers you want to target. The code sample demonstrates how to specify the browsers using the 'overrideBrowserslist' option to target the last 2 versions of all browsers.

const autoprefixer = require('autoprefixer');
const postcss = require('postcss');

postcss([ autoprefixer({ overrideBrowserslist: ['last 2 versions'] }) ])
.process('a { display: flex; }').then(result => {
  console.log(result.css);
  // Output will include prefixes for the last 2 versions of all browsers.
});

Removing unnecessary prefixes

Autoprefixer can also remove outdated prefixes if they are no longer needed for the specified browser range. The code sample shows how to disable this feature using the 'remove' option.

const autoprefixer = require('autoprefixer');
const postcss = require('postcss');

postcss([ autoprefixer({ remove: false }) ])
.process('a { -webkit-box-shadow: 0 0 10px black; box-shadow: 0 0 10px black; }').then(result => {
  console.log(result.css);
  // Output will keep the -webkit-box-shadow prefix even if it's not necessary for the specified browsers.
});

Other packages similar to autoprefixer

postcss-preset-env

postcss-preset-env is a plugin that allows you to use future CSS features today. It includes autoprefixer functionality and extends it by allowing you to use future CSS syntax that is not yet fully supported in browsers.

cssnano

cssnano is a modular CSS minifier that includes autoprefixing as one of its optimizations. While autoprefixer focuses solely on adding prefixes, cssnano aims to reduce the size of CSS files by performing a variety of optimizations, including autoprefixing.

pleeease

pleeease is a CSS processor that combines several tools, including autoprefixer, to streamline the process of writing CSS. It simplifies the workflow by integrating autoprefixing, minification, and other features into one package.

README

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 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.

Translations

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

Features

Forget about prefixes

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.

Actual data from Can I Use

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
}

Fast

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)

Instead of -prefix-free Autoprefixer compile CSS once on deploy, so it is better for client 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 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
}

Browsers

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 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, what browsers is selected and what properties will be prefixes:

inspect = autoprefixer("last 1 version").inspect();
console.log(inspect);

Usage

Ruby on Rails

Add autoprefixer-rails gem to Gemfile and write CSS in 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 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 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 by sublime-autoprefixer plugin.

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.