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):

:fullscreen a {
    transition: transform 1s
}

Process your CSS by Autoprefixer:

var prefixed = autoprefixer.process(css).css;

It will use the data on current browser popularity and properties support to apply prefixes for you:

:-webkit-full-screen a {
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s
}
:-moz-full-screen a {
    transition: transform 1s
}
:-ms-fullscreen a {
    transition: transform 1s
}
:fullscreen a {
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s
}

Twitter account for news and releases: @autoprefixer.

Sponsored by Evil Martians. Based on PostCSS framework.

Features

Forget about prefixes

The best tool is a tool you can't see and one 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
}

Note, that Autoprefixer doesn’t load Can I Use data every time. This data is already packed to release, so with same Autoprefixer version you always will have same output result.

Flexbox, Gradients, etc.

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
}

Autoprefixer has 22 special hack to fix browser’s differences.

Fast

Autoprefixer is about 16 times faster than Compass and 8 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: 489 ms
Compass:      4156 ms (8.5 times slower)
Stylus:       4165 ms (8.5 times slower)

Unlike -prefix-free, Autoprefixer compiles CSS once on deploy and doesn’t hit client-side performance.

Browsers

You can specify the browsers you want to target in your project:

autoprefixer("last 1 version", "> 1%", "explorer 7").process(css).css;

• last 2 versions is last versions for each browser. Like “last 2 versions” strategy in Google.
• last 2 chrome versions is last versions of specify browser.
• > 5% is browser versions, selected by global usage statistics.
• firefox > 20 and firefox >= 20 is Firefox versions newer, that 20.
• 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", "blackberry 10", "android 4").process(css).css;

Browsers names (case insensitive):

• android for old Android stock browser.
• blackberry or bb for Blackberry browser.
• chrome for Google Chrome.
• firefox or ff for Mozilla Firefox.
• explorer or ie for Internet Explorer.
• ios for iOS Safari.
• opera for Opera.
• safari for desktop Safari.

By default, Autoprefixer uses > 1%, last 2 versions, firefox 24, opera 12.1:

• Firefox 24 is a latest ESR.
• Opera 12.1 will be in list until Opera supports non-Blink 12.x branch.

Source Map

Autoprefixer will generate source map, if you set map option to true.

You must set input and output CSS files paths (by from and to options) to generate correct map.

var result = autoprefixer.process(css, {
    map:  true,
    from: 'main.css',
    to:   'main.out.css'
});

result.css //=> Prefixed CSS
result.map //=> Source map content

fs.writeFileSync('main.out.css.map', result.map);

Autoprefixer can also modify previous source map (for example, from Sass compilation). Just set original source map content (as string or JS object) to map option:

var result = autoprefixer.process(css, {
    map:   fs.readFileSync('main.sass.css.map'),
    from: 'main.sass.css',
    to:   'main.min.css'
});

result.map //=> Source map from main.sass to main.min.css

Debug

You can check which browsers are selected and which properties will be prefixed:

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

Or by CLI command:

autoprefixer -i

FAQ

Does it add polyfills for old browsers?

No. Autoprefixer only adds prefixes, not polyfills. There are two reasons:

1. Prefixes and polyfills are very different and need a different API. Two separate libraries would be much better.
2. Most of IE polyfills are very bad for client perfomance. They use slow hacks and old IEs is mostly used on old hardware. Most of CSS 3 features that is only used for styling should be ignored in old IEs as it is recommended in Graceful Degradation.

Why Autoprefixer doesn’t add prefixes to border-radius?

Developers are often surprised by how few prefixes are required today. If Autoprefixer doesn’t add prefixes to your CSS, check if they’re still required on Can I Use.

If a prefix is required, but Autoprefixer doesn’t add it or adds it incorrectly, please report an issue and include your source CSS and expected output.

Why Autoprefixer doesn’t support appearance?

Instead of transition, appearance property is not a part of any specification. So there is no appearance, only -moz-appearance and -webkit-appearance. Quote from MDN:

Do not use this property on Web sites: not only is it non-standard, but its behavior changes from one browser to another. Even the keyword none does not have the same behavior on each form element across different browsers, and some do not support it at all.

Usage

Grunt

You can use the grunt-autoprefixer plugin for Grunt. Install the npm package and add it to Gruntfile:

grunt.loadNpmTasks('grunt-autoprefixer');

Compass

If you use Compass binary to compile your styles, you can easily integrate Autoprefixer with it. Install autoprefixer-rails gem:

gem install autoprefixer-rails

and add post-compile hook to config.rb:

require 'autoprefixer-rails'
require 'csso'

on_stylesheet_saved do |file|
  css = File.read(file)
  File.open(file, 'w') do |io|
    io << AutoprefixerRails.compile(css)
  end
end

You can set browsers array as second argument in AutoprefixerRails.compile.

Stylus

If you use Stylus CLI, you can add Autoprefixer by autoprefixer-stylus plugin.

Just install npm package and use it in -u option:

stylus -u autoprefixer-stylus file.css

Ruby on Rails

Add autoprefixer-rails gem to Gemfile and write CSS in a 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)

Prepros

If you want to build your assets in GUI, try Prepros. Just set “Auto Prefix CSS” checkbox in right panel.

Mincer

To use Autoprefixer in Mincer, install autoprefixer npm package and enable it:

environment.enable('autoprefixer');

Middleman

Add middleman-autoprefixer gem to Gemfile:

gem "middleman-autoprefixer"

and activate the extension in your project’s config.rb:

activate :autoprefixer

Node.js

Use autoprefixer npm package:

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

PHP

You can use Autoprefixer in PHP by autoprefixer-php library:

$autoprefixer = new Autoprefixer();
$css          = 'a { transition: transform 1s }';
$prefixed     = $autoprefixer->compile($css);

JavaScript

You can use Autoprefixer in the browser or a non-Node.js runtime with standalone version.

PostCSS

Autoprefixer can be also used as a PostCSS processor, so you can combine it with other processors and parse CSS only once:

postcss().
    use( autoprefixer(['> 1%', 'opera 12.5']).postcss ).
    use( compressor ).
    process(css);

Sublime Text

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

Brackets

Styles can processed automatically in Brackets using the brackets-autoprefixer extension.

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.

In-package Update

It’s highly recommended that you always use the latest version of Autoprefixer. If by any chance you or your company are not able to update the package (e.g. in case of long test periods before any library updates), you can still update the very browser data that Autoprefixer fetches from Can I Use:

autoprefixer --update

Note that the in-package update doesn’t get any code fixes nor the implementation of new features. It just keeps the browser popularity and support data up to date, and adds new browser versions.