PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Taobao.
Write your CSS rules without vendor prefixes (in fact, forget about them entirely):
::placeholder {
color: gray;
}
Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you. You can try the interactive demo of Autoprefixer.
::-webkit-input-placeholder {
color: gray;
}
:-ms-input-placeholder {
color: gray;
}
::-ms-input-placeholder {
color: gray;
}
::placeholder {
color: gray;
}
Twitter account for news and releases: @autoprefixer.
Browsers
Autoprefixer uses Browserslist, so you can specify the browsers
you want to target in your project by queries like > 5%
(see Best Practices).
The best way to provide browsers is .browserslistrc
config
or package.json
with browserslist
key. Put it in your project root.
We recommend to avoid Autoprefixer option and use .browserslistrc
config
or package.json
. In this case browsers will be shared with other tools
like babel-preset-env or Stylelint.
See Browserslist docs for queries, browser names, config format, and default value.
FAQ
Does Autoprefixer polyfill Grid Layout for IE?
Autoprefixer can be used to use Grid Layout for IE 10 and IE 11. But this polyfill will not work in 100 % cases. This is why it is disabled by default.
First, you need to enable Grid prefixes by grid: true
option.
Second, you need to test every fix with Grid in IE. It is not, enable and forget feature. But it is still very useful. Financial Times and Yandex use it in production.
Third, there is not auto placement and all grid cell position must be set
explicitly. However, Autoprefixer can covert even grid-template
and grid-gap
(but only when they are together).
.page {
display: grid;
grid-gap: 33px;
grid-template:
"head head head" 1fr
"nav main main" minmax(100px, 1fr)
"nav foot foot" 2fr /
1fr 100px 1fr;
}
.page__head {
grid-area: head;
}
.page__nav {
grid-area: nav;
}
.page__main {
grid-area: main;
}
.page__footer {
grid-area: foot;
}
See also:
- The guide about Grids in IE and Autoprefixer.
postcss-gap-properties
to use newgap
property instead of oldgrid-gap
.postcss-grid-kiss
has alternate “everything in one property” syntax, which make using Autoprefixer’s Grid safer.
No prefixes in production
Many other tools contain Autoprefixer. For example, webpack uses Autoprefixer to minify CSS by cleaning unnecessary prefixes.
If you set browsers list to Autoprefixer by browsers
option, only first
Autoprefixer will know your browsers. Autoprefixer inside webpack will use
default browsers list. As result, webpack will remove prefixes, that first
Autoprefixer added.
You need to put your browsers to browserslist
config in project root —
as result all tools (Autoprefixer, cssnano, doiuse, cssnext) will use same
browsers list.
-webkit-min-device-pixel-ratio
?
What is unprefixed version for @media (min-resolution: 2dppx) {
.image {
background-image: url(image@2x.png);
}
}
Will be compiled to:
@media (-webkit-min-device-pixel-ratio: 2),
(-o-min-device-pixel-ratio: 2/1),
(min-resolution: 2dppx) {
.image {
background-image: url(image@2x.png);
}
}
Does it add polyfills?
No. Autoprefixer only adds prefixes.
Most new CSS features will require client side JavaScript to handle a new behavior correctly.
Depending on what you consider to be a “polyfill”, you can take a look at some other tools and libraries. If you are just looking for syntax sugar, you might take a look at:
- postcss-preset-env is a plugins preset with polyfills and Autoprefixer to write future CSS today.
- Oldie, a PostCSS plugin that handles some IE hacks (opacity, rgba, etc).
- postcss-flexbugs-fixes, a PostCSS plugin to fix flexbox issues.
border-radius
?
Why doesn’t Autoprefixer add prefixes to 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 is a list with all supported properties, values, and selectors.
@-webkit-keyframes
?
Why Autoprefixer uses unprefixed properties in Browser teams can remove some prefixes before others. So we try to use all combinations of prefixed/unprefixed values.
-webkit-
only code?
How to work with legacy Autoprefixer needs unprefixed property to add prefixes. So if you only
wrote -webkit-gradient
without W3C’s gradient
,
Autoprefixer will not add other prefixes.
But PostCSS has a plugins to convert CSS to unprefixed state. Use postcss-unprefix before Autoprefixer.
-epub-
prefix?
Does Autoprefixer add No, Autoprefixer works only with browsers prefixes from Can I Use. But you can use postcss-epub for prefixing ePub3 properties.
system-ui
?
Why doesn’t Autoprefixer transform generic font-family system-ui
is technically not a prefix and the transformation is not future-proof. But you can use postcss-font-family-system-ui to transform system-ui
to a practical font-family list.
Usage
Gulp
In Gulp you can use gulp-postcss with autoprefixer
npm package.
gulp.task('autoprefixer', function () {
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
return gulp.src('./src/*.css')
.pipe(sourcemaps.init())
.pipe(postcss([ autoprefixer() ]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dest'));
});
With gulp-postcss
you also can combine Autoprefixer
with other PostCSS plugins.
Webpack
In webpack you can use postcss-loader with autoprefixer
and other PostCSS plugins.
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
}
]
}
}
And create a postcss.config.js
with:
module.exports = {
plugins: [
require('autoprefixer')
]
}
Grunt
In Grunt you can use grunt-postcss with autoprefixer
npm package.
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
map: true,
processors: [
require('autoprefixer')
]
},
dist: {
src: 'css/*.css'
}
}
});
grunt.registerTask('default', ['postcss:dist']);
};
With grunt-postcss
you also can combine Autoprefixer
with other PostCSS plugins.
Other Build Tools:
- Ruby on Rails: autoprefixer-rails
- Neutrino: neutrino-middleware-postcss
- Jekyll: add
autoprefixer-rails
andjekyll-assets
toGemfile
- Brunch: postcss-brunch
- Broccoli: broccoli-postcss
- Middleman: middleman-autoprefixer
- Mincer: add
autoprefixer
npm package and enable it:environment.enable('autoprefixer')
Preprocessors
- Less: less-plugin-autoprefix
- Stylus: autoprefixer-stylus
- Compass: autoprefixer-rails#compass
CSS-in-JS
There is postcss-js to use Autoprefixer in React Inline Styles, Free Style, Radium and other CSS-in-JS solutions.
let prefixer = postcssJs.sync([ autoprefixer ]);
let style = prefixer({
display: 'flex'
});
GUI Tools
CLI
You can use the postcss-cli to run Autoprefixer from CLI:
npm install postcss-cli autoprefixer
npx postcss *.css --use autoprefixer -d build/
See postcss -h
for help.
JavaScript
You can use Autoprefixer with PostCSS in your Node.js application or if you want to develop an Autoprefixer plugin for new environment.
var autoprefixer = require('autoprefixer');
var postcss = require('postcss');
postcss([ autoprefixer ]).process(css).then(function (result) {
result.warnings().forEach(function (warn) {
console.warn(warn.toString());
});
console.log(result.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.
Text Editors and IDE
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 how to use build tools like Gulp. They work much better and will open you a whole new world of useful plugins and automatization.
But, if you can’t move to a build tool, you can use text editor plugins:
Warnings
Autoprefixer uses the PostCSS warning API to warn about really important problems in your CSS:
- Old direction syntax in gradients.
- Old unprefixed
display: box
instead ofdisplay: flex
by latest specification version.
You can get warnings from result.warnings()
:
result.warnings().forEach(function (warn) {
console.warn(warn.toString());
});
Every Autoprefixer runner should display this warnings.
Disabling
Prefixes
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 a wrong way, please create an issue on GitHub.
Features
You can use these plugin options to disable some of the Autoprefixer's features.
supports: false
will disable@supports
parameters prefixing.flexbox: false
will disable flexbox properties prefixing. Orflexbox: "no-2009"
will add prefixes only for final and IE versions of specification.remove: false
will disable cleaning outdated prefixes.
You should set them to the plugin:
autoprefixer({ grid: true });
Control Comments
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 */
}
.c {
/* autoprefixer: ignore next */
transition: 1s; /* it will not be prefixed */
mask: url(image.png); /* it will be prefixed */
}
There are two types of control comments:
/* autoprefixer: off */
disable the whole block before and after comment./* autoprefixer: ignore next */
disable only next property or next rule selector or at-rule parameters (but not rule/at‑rule body).
You can also use comments recursively:
/* autoprefixer: off */
@supports (transition: all) {
/* autoprefixer: on */
a {
/* autoprefixer: off */
}
}
Options
Function autoprefixer(options)
returns new PostCSS plugin.
See PostCSS API for plugin usage documentation.
autoprefixer({ cascade: false })
Available options are:
env
(string): environment for Browserslist.cascade
(boolean): should Autoprefixer use Visual Cascade, if CSS is uncompressed. Default:true
add
(boolean): should Autoprefixer add prefixes. Default istrue
.remove
(boolean): should Autoprefixer [remove outdated] prefixes. Default istrue
.supports
(boolean): should Autoprefixer add prefixes for@supports
parameters. Default istrue
.flexbox
(boolean|string): should Autoprefixer add prefixes for flexbox properties. With"no-2009"
value Autoprefixer will add prefixes only for final and IE versions of specification. Default istrue
.grid
(boolean): should Autoprefixer add IE prefixes for Grid Layout properties. Default isfalse
.stats
(object): custom usage statistics for> 10% in my stats
browsers query.browsers
(array): list of queries for target browsers. Try to not use it. The best practice is to use.browserslistrc
config orbrowserslist
key inpackage.json
to share target browsers with Babel, ESLint and Stylelint. See Browserslist docs for available queries and default value.ignoreUnknownVersions
(boolean): do not raise error on unknown browser version in Browserslist config orbrowsers
option. Default isfalse
.
Plugin object has info()
method for debugging purpose.
You can use PostCSS processor to process several CSS files to increase performance.
Debug
Run npx autoprefixer --info
in your project directory to check
which browsers are selected and which properties will be prefixed:
$ npx autoprefixer --info
Browsers:
Edge: 16
These browsers account for 0.04% of all users globally
At-Rules:
@viewport: ms
Selectors:
::placeholder: ms
Properties:
user-select: ms
hyphens: ms
appearance: webkit
scroll-snap-type: ms
scroll-snap-coordinate: ms
scroll-snap-destination: ms
scroll-snap-points-x: ms
scroll-snap-points-y: ms
flow-into: ms
flow-from: ms
region-fragment: ms
text-spacing: ms
JS API is also available:
var info = autoprefixer().info();
console.log(info);