Minificar CSS Online: Minificador CSS

A Saída Minificada

O formatador em modo minificação na entrada acima produz:

.container{max-width:1200px;margin:0 auto;padding:0 1rem}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid #e5e7eb}.nav-link{color:#374151;text-decoration:none;font-weight:500;transition:color .15s ease}.nav-link:hover{color:#3b82f6}.card{background:#fff;border-radius:.75rem;border:1px solid #e5e7eb;padding:1.5rem;box-shadow:0 1px 2px rgba(0,0,0,.05)}

O que a Minificação Remove

Comentários, espaços em branco, caracteres redundantes, abreviação de cor (#ffffff vira #fff), zeros à esquerda (0.75rem vira .75rem).

Minificação vs Compressão

Integração com Ferramentas de Build

Vite e Rollup usam esbuild para minificação CSS em builds de produção. webpack requer css-minimizer-webpack-plugin. PostCSS com cssnano dá o maior controle.

Quando Usar um Minificador Online

Use quando precisar verificar quão agressivamente um arquivo será minificado antes de configurar o build, ou quando estiver trabalhando com um trecho CSS que não pertence a um projeto com pipeline de build.

Veja Também

• Comparador de Diferenças: compare o CSS antes e depois da minificação