0Pricing
CSS Academy · Lesson

Autoprefixer and cssnano

Automatically add vendor prefixes with Autoprefixer and minify CSS output with cssnano.

What is Autoprefixer?

Autoprefixer is a PostCSS plugin that automatically adds vendor prefixes (-webkit-, -moz-, -ms-) to CSS properties based on the browsers you need to support, using data from Can I Use.

How Autoprefixer Works

You write standard CSS without prefixes. Autoprefixer reads your Browserslist configuration and adds the required prefixes for your target browsers during the build process.

/* You write: */
.flex { display: flex; }

/* Autoprefixer outputs: */
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

All lessons in this course

  1. What PostCSS Does and How It Works
  2. Autoprefixer and cssnano
  3. Custom PostCSS Plugins
  4. PostCSS in Vite and Webpack
← Back to CSS Academy