Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website
Write your CSS rules without vendor prefixes (in fact, forget about them entirely):
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.
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
unit function (
calc()), at‑rules (
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.
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
border-radius prefixes, produced by many CSS libraries).
Autoprefixer uses Browserslist, so you can specify the browsers
you want to target in your project by queries like
last 2 versions
The best way to provide browsers is
browserslist key. Put it in your project root.
See Browserslist docs for queries, browser names, config format, and default value.
By default, Autoprefixer also removes outdated prefixes.
You can disable this behavior with the
remove: false option. If you have
no legacy code, this option will make Autoprefixer about 10% faster.
Also, you can set the
add: false option. Autoprefixer will only clean outdated
prefixes, but will not add any new prefixes.
Autoprefixer adds new prefixes between any unprefixed properties and already written prefixes in your CSS. If it will break the expected prefixes order, you can clean all prefixes from your CSS and then add the necessary prefixes again:
var cleaner = ;var prefixer = ;cleaner;
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
You need to put your browsers to
browserslist config in project root —
as result all tools (Autoprefixer, cssnano, doiuse, cssnext) will use same
No. Autoprefixer only adds prefixes.
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:
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.
Browser teams can remove some prefixes before others. So we try to use all combinations of prefixed/unprefixed values.
Autoprefixer needs unprefixed property to add prefixes. So if you only
-webkit-gradient without W3C’s
Autoprefixer will not add other prefixes.
But PostCSS has a plugins to convert CSS to unprefixed state. Use them before Autoprefixer:
No, Autoprefixer works only with browsers prefixes from Can I Use. But you can use postcss-epub for prefixing ePub3 properties.
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.
In Gulp you can use gulp-postcss with
autoprefixer npm package.
gulp-postcss you also can combine Autoprefixer
with other PostCSS plugins.
moduleexports =module:loaders:test: /\.css$/loader: "style-loader!css-loader!postcss-loader"
And create a
In Grunt you can use grunt-postcss with
autoprefixer npm package.
grunt-postcss you also can combine Autoprefixer
with other PostCSS plugins.
autoprefixernpm package and enable it:
let prefixer = postcssJs;let style =;
You can use the postcss-cli to run Autoprefixer from CLI:
npm install --global postcss-cli autoprefixerpostcss --use autoprefixer *.css -d build/
postcss -h for help.
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 = ;var postcss = ;;
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.
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:
Autoprefixer uses the PostCSS warning API to warn about really important problems in your CSS:
display: boxinstead of
display: flexby latest specification version.
You can get warnings from
Every Autoprefixer runner should display this warnings.
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.
If some prefixes were generated in a wrong way, please create an issue on GitHub.
Autoprefixer has 4 features, which can be disabled by options:
supports: falsewill disable
flexbox: falsewill disable flexbox properties prefixing. Or
flexbox: "no-2009"will add prefixes only for final and IE versions of specification.
grid: falsewill disable Grid Layout prefixes for IE.
remove: falsewill disable cleaning outdated prefixes.
If you do not need Autoprefixer in some part of your CSS, you can use control comments to disable Autoprefixer.
Control comments disable 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 */@)}
In Sass/SCSS you can use all the disable options above, add an exclamation mark
in the start of comment:
/*! autoprefixer: off */.
autoprefixer(options) returns new PostCSS plugin.
See PostCSS API for plugin usage documentation.
var plugin = ;
There are 8 options:
browsers(array): list of browsers query (like
last 2 version), which are supported in your project. We recommend to use
package.json, rather than this option to share browsers with other tools. See Browserslist docs for available queries and default value.
env(string): environment for Browserslist.
cascade(boolean): should Autoprefixer use Visual Cascade, if CSS is uncompressed. Default:
add(boolean): should Autoprefixer add prefixes. Default is
remove(boolean): should Autoprefixer [remove outdated] prefixes. Default is
supports(boolean): should Autoprefixer add prefixes for
@supportsparameters. Default is
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 is
grid(boolean): should Autoprefixer add IE prefixes for Grid Layout properties. Default is
stats(object): custom usage statistics for
> 10% in my statsbrowsers query.
Plugin object has
info() method for debugging purpose.
You can use PostCSS processor to process several CSS files to increase performance.
You can check which browsers are selected and which properties will be prefixed:
var info = ;console;