autoprefixer

What is autoprefixer?

The autoprefixer npm package is a PostCSS plugin that parses your CSS and adds vendor prefixes to CSS rules using values from Can I Use. It is a tool that automates the process of adding vendor prefixes to CSS rules to ensure cross-browser compatibility.

What are autoprefixer's main functionalities?

Adding vendor prefixes

This feature automatically adds necessary vendor prefixes to CSS rules. The code sample shows how to use autoprefixer with PostCSS to process a CSS string that includes the 'display: flex;' rule, which then outputs the rule with the appropriate vendor prefixes.

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

postcss([ autoprefixer ]).process('a { display: flex; }').then(result => {
  console.log(result.css);
  // Output: 'a { display: -webkit-box; display: -ms-flexbox; display: flex; }'
});

Customizing browser support

Autoprefixer allows customization of the browsers you want to target. The code sample demonstrates how to specify the browsers using the 'overrideBrowserslist' option to target the last 2 versions of all browsers.

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

postcss([ autoprefixer({ overrideBrowserslist: ['last 2 versions'] }) ])
.process('a { display: flex; }').then(result => {
  console.log(result.css);
  // Output will include prefixes for the last 2 versions of all browsers.
});

Removing unnecessary prefixes

Autoprefixer can also remove outdated prefixes if they are no longer needed for the specified browser range. The code sample shows how to disable this feature using the 'remove' option.

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

postcss([ autoprefixer({ remove: false }) ])
.process('a { -webkit-box-shadow: 0 0 10px black; box-shadow: 0 0 10px black; }').then(result => {
  console.log(result.css);
  // Output will keep the -webkit-box-shadow prefix even if it's not necessary for the specified browsers.
});

Other packages similar to autoprefixer

postcss-preset-env

postcss-preset-env is a plugin that allows you to use future CSS features today. It includes autoprefixer functionality and extends it by allowing you to use future CSS syntax that is not yet fully supported in browsers.

cssnano

cssnano is a modular CSS minifier that includes autoprefixing as one of its optimizations. While autoprefixer focuses solely on adding prefixes, cssnano aims to reduce the size of CSS files by performing a variety of optimizations, including autoprefixing.

pleeease

pleeease is a CSS processor that combines several tools, including autoprefixer, to streamline the process of writing CSS. It simplifies the workflow by integrating autoprefixing, minification, and other features into one package.

README

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 {
  background-image: url([e-mail]);
}
@media (min-resolution: 2dppx) {
  .image {
    background-image: url([e-mail]);
  }
}

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;
}
:-ms-input-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

.image {
  background-image: url([e-mail]);
}
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx) {
  .image {
    background-image: url([e-mail]);
  }
}

Twitter account for news and releases: @autoprefixer.

Docs

Read full docs on GitHub.

Changelog

10.4.2

• Fixed missed -webkit- prefix for width: stretch.