PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.
Write your CSS rules without vendor prefixes (in fact, forget about them entirely):
:fullscreen a {
transition: transform 1s;
}
Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you. You try in the interactive demo of Autoprefixer.
:-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;
}
Autoprefixer is recommended by Google and used in Twitter, WordPress, Bootstrap and CodePen.
Twitter account for news and releases: @autoprefixer.
Working with Autoprefixer is simple: just forget about vendor prefixes and write normal CSS according to the latest W3C specs. You don’t need a special language (like Sass) or remember where you must use mixins.
Autoprefixer supports selectors (like :fullscreen
and ::selection
),
unit function (calc()
), at‑rules (@support
and @keyframes
) and properties.
Because Autoprefixer is a postprocessor for CSS, you can also use it with preprocessors such as Sass, Stylus or LESS.
Just write normal CSS according to the 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 27 special hacks to fix web browser differences.
Autoprefixer utilizes the most recent data from Can I Use to add only necessary vendor prefixes.
It also removes old, unnecessary prefixes from your CSS (like border-radius
prefixes, produced by many CSS libraries).
a {
-webkit-border-radius: 5px;
border-radius: 5px;
}
compiles to:
a {
border-radius: 5px;
}
You can specify the browsers you want to target in your project:
last 2 versions
targets the last 2 versions for each browser.last 2 Chrome versions
targets the last versions of a specific browser.> 5%
declares browser versions selected by global usage statistics.Firefox > 20
targets versions of Firefox newer than 20.Firefox >= 20
targets versions of Firefox newer than or equal to 20.Firefox < 20
targets versions of Firefox less than 20.Firefox <= 20
targets versions of Firefox less than or equal to 20.Firefox ESR
specifies the latest Firefox ESR version.ios 7
will set the browser version directly.
Blackberry and stock Android browsers will not be used in last n versions
.
You should add them by name.
Browsers names (case insensitive):
Android
for old Android stock browser.BlackBerry
orbb
for Blackberry browser.Chrome
for Google Chrome.Firefox
orff
for Mozilla Firefox.Explorer
orie
for Internet Explorer.iOS
orios_saf
for iOS Safari.Opera
for Opera.Safari
for desktop Safari.OperaMobile
orop_mob
for Opera Mobile.OperaMini
orop_mini
for Opera Mini.ChromeAndroid
orand_chr
for Chrome for Android (mostly same as commonChrome
).FirefoxAndroid
orand_ff
for Firefox for Android.ExplorerMobile
orie_mob
for Internet Explorer Mobile.
By default, Autoprefixer uses > 1%, last 2 versions, Firefox ESR, Opera 12.1
:
- Latest Firefox ESR is a 31 version.
- Opera 12.1 will be in list until Opera supports non-Blink 12.x branch.
Autoprefixer can modify previous source maps (for example, from Sass): it will autodetect a previous map if it is listed in an annotation comment.
Autoprefixer supports inline source maps too. If an input CSS contains annotation from the previous step with a map in data:uri, Autoprefixer will update the source map with prefix changes and inline the new map back into the output CSS.
Autoprefixer changes CSS indentation to create a nice visual cascade of prefixes if the CSS is uncompressed:
a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
You can disable cascade by using the cascade: false
option.
Autoprefixer was designed to have no interface – it just works. If you need some browser specific hack just write a prefixed property after the unprefixed one.
a {
transform: scale(0.5);
-moz-transform: scale(0.6);
}
If some prefixes were generated in wrong way, please create issue on GitHub.
But if you do not need Autoprefixer in some part of your CSS, you can use control comments to disable Autoprefixer.
a {
transition: 1s; /* it will be prefixed */
}
b {
/* autoprefixer: off */
transition: 1s; /* it will not be prefixed */
}
Control comments disables Autoprefixer within the whole rule in which
you place it. In the above example, Autoprefixer will be disabled
in the entire b
rule scope, not only after the comment.
You can also use comments recursively:
/* autoprefixer: off */
@support (transition: all) {
/* autoprefixer: on */
a {
/* autoprefixer: off */
}
}
No. Autoprefixer only adds prefixes, not polyfills. There are two reasons:
- Prefixes and polyfills are very different and need a different API. Two separate libraries would be much better.
- Most of IE polyfills are bad for client performance, as they use slow hacks and old IEs often runs on old hardware. Most CSS3 features used only for styling should be ignored in old IEs as it is recommended for graceful degradation.
Make sure that you use correct the direction syntax.
For example, you should use to bottom
instead of top
:
a {
background: linear-gradient(to bottom, white, black)
}
Unfortunately, unprefixed gradients use a different direction syntax and most examples you find use an old gradient syntax, so be careful and use always the latest W3C specs with Autoprefixer.
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.
There was 3 specification versions for Flexbox. For example, 2009 draft
suggested to write display: box
, 2012 draft display: flexbox
,
but final versions display: flex
.
Autoprefixer add prefixes only for properties from final version
of Flexbox spec. So, for example, you need to write display: flex
instead
of display: box
.
Unlike transition
, the appearance
property is not a part of
any specification. So there is no appearance
, only -moz-appearance
and -webkit-appearance
.
No, Autoprefixer works only with browsers prefixes from Can I Use. But you can use postcss-epub for prefix ePub3 properties.
You can use the grunt-postcss plugin for Grunt with autoprefixer-core
and other PostCSS plugins. Install the npm package and add it to Gruntfile
:
var autoprefixer = require('autoprefixer-core');
grunt.initConfig({
postcss: {
options: {
processors: [
autoprefixer({ browsers: ['last 2 version'] }).postcss
]
},
dist: { src: 'css/*.css' }
},
});
grunt.loadNpmTasks('grunt-postcss');
In Gulp you can use gulp-postcss with autoprefixer-core
npm package.
gulp.task('autoprefixer', function () {
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer-core');
return gulp.src('./src/*.css')
.pipe(sourcemaps.init())
.pipe(postcss([ autoprefixer({ browsers: ['last 2 version'] }) ]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dest'));
});
With gulp-postcss
you also can combine Autoprefixer
with other PostCSS plugins.
In webpack you can use postcss-loader with autoprefixer-core
and other PostCSS plugins.
var autoprefixer = require('autoprefixer-core');
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: [ autoprefixer({ browsers: ['last 2 version'] }) ]
}
- Ruby on Rails: autoprefixer-rails
- Brunch: autoprefixer-brunch
- Broccoli: broccoli-autoprefixer
- Middleman: middleman-autoprefixer
- Mincer: add
autoprefixer
npm package and enable it:environment.enable('autoprefixer')
- Jekyll: add
autoprefixer-rails
andjekyll-assets
toGemfile
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'
on_stylesheet_saved do |file|
css = File.read(file)
map = file + '.map'
if File.exists? map
result = AutoprefixerRails.process(css,
from: file,
to: file,
map: { prev: map, inline: false })
File.open(file, 'w') { |io| io << result.css }
File.open(map, 'w') { |io| io << result.map }
else
File.open(file, 'w') { |io| io << AutoprefixerRails.process(css) }
end
end
You can use autoprefixer with less by including the less-plugin-autoprefix plugin.
If you use Stylus CLI, you can add Autoprefixer by autoprefixer-stylus plugin:
stylus -u autoprefixer-stylus -w file.styl
CodeKit, since the 2.0 version, contains Autoprefixer. In the After Compiling section, there is a checkbox to enable Autoprefixer. Read CodeKit docs for more information.
If you need free assets build GUI tool, try Prepros. Just set “Auto Prefix CSS” checkbox in right panel.
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.
You can use autoprefixer-core in your node.js application or if you want to develop Autoprefixer plugin for new environment.
var autoprefixer = require('autoprefixer-core');
var prefixed = autoprefixer.process('a { transition: transform 1s }').css;
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({ browsers: ['> 1%', 'IE 9'] }) ).
use( compressor ).
process(css);
There is also standalone build for the browser or as a non-Node.js runtime.
You can use html-autoprefixer to process HTML with inlined CSS.
You can use Autoprefixer in PHP by autoprefixer-php library:
$autoprefixer = new Autoprefixer();
$prefixed = $autoprefixer->compile('a { transition: transform 1s }');
For .NET you can use Autoprefixer for .NET library.
For ASP.NET you can use the official BundleTransformer.Autoprefixer plugin for Bundle Transformer.
- Install package via NuGet:
PM> Install-Package BundleTransformer.Autoprefixer
- Perform a post-install actions specified in the
readme.txt
file. - Register a bundles in the
App_Start/BundleConfig.cs
file and configure the Bundle Transformer (see the documentation).
Autoprefixer should be used in assets build tools. Text editor plugins are not a good solution, because prefixes decrease code readability and you will need to change value in all prefixed properties.
I recommend you to learn build tools like Grunt or Gulp. They works much better and will open you entire new world of useful plugins and automatization.
But, if you can’t move to build tool, you can use text editor plugins:
You can apply the Autoprefixer optimizations to your LESS/Sass stylesheets in Visual Studio 2013 by using the Web Essentials 2013 plugin (since the 2.2 version).
To add this functionality in the Visual Studio 2013 (Update 2 or later) you need to do the following steps:
- Download and install the Web Essentials 2013 for Update 2.
- Choose a
Tools
→Options
→Web Essentials
→CSS
menu item - In the
Enable Autoprefixer
box specify a value equal toTrue