randylien / autoprefixer

Parse CSS and add vendor prefixes to rules by Can I Use

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.compile(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;
}

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

Twitter account for news and releases: @autoprefixer.

Sponsored by Evil Martians.

Translations

На русском: статья про Автопрефиксер на Хабрахабре

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
}

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
}

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: 316 ms
Compass:      5342 ms (16.9 times slower)
Rework:       249 ms  (1.3 times faster)
Stylus:       2548 ms (8.1 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%", "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.
• ff > 20 and ff >= 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", "bb 10", "android 4").compile(css);

You can find the browsers codenames in data file:

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

By default, Autoprefixer uses > 1%, last 2 versions, ff 17, opera 12.1:

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

Inspect

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

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

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 doesn’t Autoprefixer do anything?

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.

Does it support source maps?

Unfortunately, right now Autoprefixer doesn’t support source maps. However, this feature will be included in the next version, 1.0, which is currently under development and is planned for release in mid-December 2013.

Right now you can use lydell’s fork with source map support: lydell/autoprefixer.

You can check the current status of this feature in autoprefixer#37.

Why Autoprefixer plugin for text editor changed my indents?

Rework, which Autoprefixer currently uses for parsing CSS, doesn’t save indents, because it was created for Grunt and other build tools.

In version 1.0 Autoprefixed will switch to the PostCSS parser, which preserves formatting of the code.

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');

If you use Sass with compress output style and worry, that Autoprefixer uncompress CSS, try grunt-csso. It compress CSS back, but did it much better than Sass.

Prepros

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

Compass

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

gem install autoprefixer-rails csso-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 << Csso.optimize( AutoprefixerRails.compile(css) )
  end
end

If you use compress output style, Autoprefixer will uncompress CSS. For this reason, we use csso-rails to compress CSS back (it compress much better than Sass).

If you need uncompressed CSS, remove Csso.optimize method call.

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

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(['> 1%', 'opera 12.5']).rework ).
    use( rework.references() ).
    toString();

PHP

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

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

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.

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.