Autoprefixer

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 Alibaba.

Write your CSS rules without vendor prefixes (in fact, forget about them entirely):

::placeholder {
  color: gray;
}

.image {
  width: stretch;
}

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.

::-moz-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

.image {
  width: -moz-available;
  width: -webkit-fill-available;
  width: stretch;
}

Twitter account for news and releases: @autoprefixer.

Contents

• Contents
• Browsers
• FAQ
• Does Autoprefixer polyfill Grid Layout for IE?
• Does it add polyfills?
• Why doesn’t Autoprefixer add prefixes to border-radius?
• Why does Autoprefixer use unprefixed properties in @-webkit-keyframes?
• How to work with legacy -webkit- only code?
• Does Autoprefixer add -epub- prefix?
• Why doesn’t Autoprefixer transform generic font-family system-ui?
• Usage
• Gulp
• Webpack
• CSS-in-JS
• CLI
• Other Build Tools
  • Preprocessors
  • GUI Tools
• JavaScript
• Text Editors and IDE
• Warnings
• Disabling
• Prefixes
• Features
• Control Comments
• Options
• Environment Variables
• Using environment variables to support CSS Grid prefixes in Create React App
• Grid Autoplacement support in IE
• Beware of enabling autoplacement in old projects
• Autoplacement limitations
  • Both columns and rows must be defined
  • Repeat auto-fit and auto-fill are not supported
  • No manual cell placement or column/row spans allowed inside an autoplacement grid
  • Do not create ::before and ::after pseudo elements
  • When changing the grid gap value, columns and rows must be re-declared
• Debug
• Security Contact
• For Enterprise

Browsers

Autoprefixer uses Browserslist, so you can specify the browsers you want to target in your project with queries like > 5% (see Best Practices).

The best way to provide browsers is a .browserslistrc file in your project root, or by adding a browserslist key to your package.json.

We recommend the use of these options over passing options to Autoprefixer so that the config can be shared with other tools such as babel-preset-env and Stylelint.

See Browserslist docs for queries, browser names, config format, and defaults.

FAQ

Does Autoprefixer polyfill Grid Layout for IE?

Autoprefixer can be used to translate modern CSS Grid syntax into IE 10 and IE 11 syntax, but this polyfill will not work in 100% of cases. This is why it is disabled by default.

First, you need to enable Grid prefixes by using either the grid: "autoplace" option or the /* autoprefixer grid: autoplace */ control comment. Also you can use environment variable to enable Grid: AUTOPREFIXER_GRID=autoplace npm build.

Second, you need to test every fix with Grid in IE. It is not an enable and forget feature, but it is still very useful. Financial Times and Yandex use it in production.

Third, there is only very limited auto placement support. Read the Grid Autoplacement support in IE section for more details.

Fourth, if you are not using the autoplacement feature, the best way to use Autoprefixer is by using grid-template or grid-template-areas.

.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 new gap property instead of old grid-gap.
• [postcss-grid-kiss] has alternate “everything in one property” syntax, which makes using Autoprefixer’s Grid translations safer.

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.

Why doesn’t Autoprefixer 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.

Why does Autoprefixer use unprefixed properties in @-webkit-keyframes?

Browser teams can remove some prefixes before others, so we try to use all combinations of prefixed/unprefixed values.

How to work with legacy -webkit- only code?

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 plugins to convert CSS to unprefixed state. Use postcss-unprefix before Autoprefixer.

Does Autoprefixer add -epub- prefix?

No, Autoprefixer works only with browsers prefixes from Can I Use. But you can use postcss-epub for prefixing ePub3 properties.

Why doesn’t Autoprefixer transform generic font-family system-ui?

system-ui is technically not a prefix and the transformation is not future-proof. 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', () => {
  const autoprefixer = require('autoprefixer')
  const sourcemaps = require('gulp-sourcemaps')
  const postcss = require('gulp-postcss')

  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')]
}

CSS-in-JS

The best way to use PostCSS with CSS-in-JS is [astroturf]. Add its loader to your webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'postcss-loader']
      },
      {
        test: /\.jsx?$/,
        use: ['babel-loader', 'astroturf/loader']
      }
    ]
  }
}

Then create postcss.config.js:

module.exports = {
  plugins: [require('autoprefixer')]
}

CLI

You can use the postcss-cli to run Autoprefixer from CLI:

npm install postcss postcss-cli autoprefixer
npx postcss *.css --use autoprefixer -d build/

See postcss -h for help.

Other Build Tools

• Grunt: grunt-postcss
• Ruby on Rails: autoprefixer-rails
• Neutrino: neutrino-middleware-postcss
• Jekyll: add autoprefixer-rails and jekyll-assets to Gemfile
• 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

GUI Tools

• CodeKit
• Prepros

JavaScript

You can use Autoprefixer with PostCSS in your Node.js application or if you want to develop an Autoprefixer plugin for a new environment.

const autoprefixer = require('autoprefixer')
const postcss = require('postcss')

postcss([autoprefixer])
  .process(css)
  .then(result => {
    result.warnings().forEach(warn => {
      console.warn(warn.toString())
    })
    console.log(result.css)
  })

There is also a standalone build for the browser or for 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 values in all prefixed properties.

I recommend you to learn how to use build tools like Parcel. They work much better and will open you a whole new world of useful plugins and automation.

If you can’t move to a build tool, you can use text editor plugins:

• Visual Studio Code
• Sublime Text

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 of display: flex by latest specification version.

You can get warnings from result.warnings():

result.warnings().forEach(warn => {
  console.warn(warn.toString())
})

Every Autoprefixer runner should display these warnings.

[P