CSS Academy · Lesson

Autoprefixer and cssnano

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

Autoprefixer and cssnano is a free CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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;
}

Browserslist Configuration

Autoprefixer uses Browserslist to determine target browsers. Define in .browserslistrc or package.json:

# .browserslistrc
> 1%
last 2 versions
not dead

Modern CSS Needs Few Prefixes

As of 2024, most modern CSS (Grid, Flexbox, custom properties, transforms) needs zero or minimal prefixes. Autoprefixer is most useful for cutting-edge properties like appearance, user-select, and newer APIs.

Adding Autoprefixer to PostCSS

Include autoprefixer in your PostCSS config:

// postcss.config.js
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [autoprefixer]
};

What is cssnano?

cssnano is a PostCSS plugin that minifies CSS by removing whitespace, comments, redundant declarations, and applying safe optimizations — producing the smallest possible CSS file.

cssnano Presets

cssnano offers optimization presets:

default: safe minifications (remove whitespace, comments, duplicates)
advanced: aggressive optimizations that may alter specificity (use carefully)

// postcss.config.js
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    cssnano({ preset: 'default' })
  ]
};

What cssnano Does

cssnano optimizations include:

Remove whitespace and comments
Convert colors to shortest form (#ffffff → #fff)
Merge identical rules
Remove redundant properties
Shorten zero values (0px → 0)

Combining Both in Config

A production PostCSS config with both plugins:

module.exports = {
  plugins: [
    require('autoprefixer'),
    process.env.NODE_ENV === 'production' && require('cssnano')({ preset: 'default' })
  ].filter(Boolean)
};

Sourcemaps with Minification

Always generate source maps when using cssnano in development builds. They map the minified output back to source CSS for debugging in DevTools.

Alternatives to cssnano

Other CSS minifiers include: clean-css, lightningcss (very fast Rust-based), and build-tool built-in minifiers like Vite's internal CSS minifier (which uses esbuild).

Quick Check

What determines which vendor prefixes Autoprefixer adds to your CSS?

Recap

Autoprefixer automatically adds vendor prefixes based on your Browserslist target browsers, removing the need to write prefixes manually. cssnano minifies CSS by removing whitespace, comments, and applying safe optimizations. Use both in production PostCSS pipelines. Modern CSS needs fewer prefixes than before — verify with your actual browser targets.

Frequently asked questions

Is the “Autoprefixer and cssnano” lesson free?

Yes — the full text of “Autoprefixer and cssnano” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Autoprefixer and cssnano”?

Automatically add vendor prefixes with Autoprefixer and minify CSS output with cssnano. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Autoprefixer and cssnano” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy