CSS Academy · Aula

Autoprefixer e cssnano

Adicione automaticamente prefixos de fornecedor com o Autoprefixer e reduza o CSS de saída com o cssnano.

Autoprefixer e cssnano é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

O que é o Autoprefixer?

Autoprefixer é um plug-in do PostCSS que adiciona automaticamente prefixos de fornecedor (-webkit-, -moz-, -ms-) às propriedades CSS com base nos navegadores que você precisa compatibilizar, usando dados do Can I Use.

Como o Autoprefixer funciona

Você escreve CSS padrão sem prefixos. O Autoprefixer lê sua configuração do Browserslist e adiciona os prefixos necessários para os navegadores-alvo durante o processo de compilação.

<div class="flex">Flexbox row (display: flex — Autoprefixer would add -webkit-box/-ms-flexbox for older targets)</div>

Configuração do Browserslist

O Autoprefixer usa o Browserslist para determinar os navegadores-alvo. Defina a configuração em .browserslistrc ou package.json:

# .browserslistrc
> 1%
last 2 versions
not dead

O CSS moderno precisa de poucos prefixos

Em 2024, a maior parte do CSS moderno (Grid, Flexbox, propriedades personalizadas e transformações) não precisa de prefixos ou precisa de pouquíssimos. O Autoprefixer é mais útil para propriedades de ponta, como appearance, user-select e APIs mais recentes.

Adicionando o Autoprefixer ao PostCSS

Inclua o autoprefixer na configuração do PostCSS:

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

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

O que é o cssnano?

cssnano é um plug-in do PostCSS que reduz o tamanho do CSS removendo espaços em branco, comentários e declarações redundantes, além de aplicar otimizações seguras — produzindo o menor arquivo CSS possível.

Predefinições do cssnano

O cssnano oferece predefinições de otimização:

default: reduções seguras (remove espaços em branco, comentários e duplicatas)
advanced: otimizações agressivas que podem alterar a especificidade (use com cuidado)

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

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

O que o cssnano faz

As otimizações do cssnano incluem:

Remover espaços em branco e comentários
Converter cores para a forma mais curta (#ffffff → #fff)
Mesclar regras idênticas
Remover propriedades redundantes
Encurtar valores zero (0px → 0)

Combinando ambos na configuração

Uma configuração de produção do PostCSS com os dois plug-ins:

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

Mapas de origem com redução

Sempre gere mapas de origem ao usar o cssnano em compilações de desenvolvimento. Eles relacionam a saída reduzida ao CSS de origem para depuração no DevTools.

Alternativas ao cssnano

Outros redutores de CSS incluem: clean-css, lightningcss (muito rápido, baseado em Rust) e redutores integrados às ferramentas de compilação, como o redutor interno de CSS do Vite (que usa o esbuild).

Verificação rápida

O que determina quais prefixos de fornecedor o Autoprefixer adiciona ao seu CSS?

Recapitulação

O Autoprefixer adiciona automaticamente prefixos de fornecedor com base nos navegadores-alvo do seu Browserslist, eliminando a necessidade de escrever prefixos manualmente. O cssnano reduz o tamanho do CSS removendo espaços em branco e comentários e aplicando otimizações seguras. Use ambos nos pipelines de produção do PostCSS. O CSS moderno precisa de menos prefixos do que antes — verifique isso com seus navegadores-alvo reais.

Perguntas Frequentes

A aula “Autoprefixer e cssnano” é grátis?

Sim — o texto completo de “Autoprefixer e cssnano” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Autoprefixer e cssnano”?

Adicione automaticamente prefixos de fornecedor com o Autoprefixer e reduza o CSS de saída com o cssnano. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Autoprefixer e cssnano”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para CSS Academy