What is autoprefixer? | Sajad Torkamani

Autoprefixer is a PostCSS plugin that parses your CSS and adds vendor prefixes by using data from caniuse.com

For example, you can write CSS like this:

::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}
@media (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

You can use browserslist via a .browserslistrc file or a browserslist field in package.json to configure which browsers you want to support with queries like > 5% (for browsers with at least 5% markets share) and Autoprefixer will apply the appropriate prefixes:

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

.image {
  background-image: url(image@1x.png);
}
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

Sources/links

postcss/autoprefixer GitHub repo

Tagged: CSS

Sources/links

Leave a comment Cancel reply