Minificador e Embelezador CSS
Comprimir CSS para produção ou Embelezar para legibilidade (100% Lado do Cliente)
Documentação do Minificador e Formatador CSS
O que é esta ferramenta?
A minificação CSS remove caracteres sintaticamente desnecessários das folhas de estilo sem alterar seu comportamento: espaços entre regras, quebras de linha, comentários CSS (/* ... */), ponto-e-vírgula redundante antes de chaves de fechamento. O beautifier reformata com indentação e quebras de linha consistentes.
Recursos Principais
- Remoção de espaços e comentários: remove todos os espaços entre regras, quebras de linha e comentários /* */. Preserva literais de string e valores url(). Mantém /*! ... */ com opção habilitada.
- Compactação de seletores: colapsa múltiplos espaços em seletores, remove último ponto-e-vírgula antes de }, normaliza 0px→0 e 0.5→.5.
- Indentação configurável: 2 espaços, 4 espaços ou tabulação; uma regra por linha; preserva @media, @keyframes e estruturas aninhadas.
- Suporte a custom properties: não compacta expressões var() nem espaços em calc() (pode quebrar parsing em alguns navegadores).
- Exibição do delta de tamanho: bytes originais, bytes minificados e percentual de compressão ao lado do resultado.
Casos de Uso Comuns
- Pipeline de build de produção: integração no Webpack (css-minimizer-webpack-plugin), Vite (Lightning CSS integrado) ou Gulp (gulp-clean-css).
- Depuração de CSS minificado de terceiros: beautify de Bootstrap 5 ou saída Tailwind para inspecionar estrutura de regras.
- Limpeza de folhas de estilo legadas: reformatar CSS com indentação inconsistente antes de refatorar.
- Redução de payload CDN: servir CSS minificado reduz bytes transferidos e melhora LCP; redução típica de 20-50%.
Como esta ferramenta processa CSS
Remoção de espaços em branco
Remove todos os espaços, quebras de linha e tabulações desnecessários. As regras CSS são condensadas em uma única linha sem afetar a funcionalidade. Exemplo: `.btn { color: red; }` torna-se `.btn{color:red;}`
Remoção de comentários
Remove todos os comentários CSS (/* ... */) a menos que a opção 'Preservar comentários' esteja ativada. Comentários de licença importantes usando a sintaxe /*! ... */ são geralmente preservados pela maioria dos minificadores.
Remoção de caracteres redundantes
Elimina ponto e vírgula desnecessário (última propriedade em uma regra), espaços ao redor de operadores e zeros extras (0.5 → .5). Encurta códigos de cores (#ffffff → #fff).
Otimização de propriedades
Remove espaços ao redor de chaves, dois pontos e vírgulas. Exemplo: `margin: 10px 20px;` torna-se `margin:10px 20px;`. Nota: espaços são preservados em calc() e outras funções onde são necessários.
Impacto no tamanho do arquivo
20-50% de redução para CSS escrito à mão. 5-15% para saídas de framework. 40-60% para arquivos com muitos comentários. Gzip adicional: 70-80% de redução de transferência.
| Cenário | Original | Minificado | Redução | Compactado |
|---|---|---|---|---|
| CSS bem formatado com comentários | 50 KB | 25-30 KB | 40-50% | ~5-8 KB (85-90% total) |
| CSS já compacto com poucos comentários | 30 KB | 24-27 KB | 10-20% | ~4-6 KB (80-85% total) |
| CSS de documentação muito comentado | 100 KB | 40-50 KB | 50-60% | ~8-12 KB (88-92% total) |
Ferramentas Relacionadas
Minificador e Embelezador HTML
Comprima ou embeleze código HTML, remova espaços em branco e comentários para otimizar o tamanho do arquivo, ou formate o código para legibilidade
Minificador e Embelezador JavaScript
Comprima ou embeleze código JavaScript, remova espaços em branco e comentários para otimizar o tamanho do arquivo, ou formate o código para legibilidade
Seletor e Conversor de Cores
Converta cores entre formatos HEX, RGB, HSL, CMYK, YCbCr, Lab, gere paletas de cores e verifique contraste WCAG
Gerador de Paleta de Cores
Gerador de paleta de cores profissional com mistura de cores, criação de gradiente, esquemas de cores e exportação para formatos CSS/SCSS/JSON
Conversor de Imagem para Base64
Converta imagens para codificação Base64, suportando formatos PNG, JPG, GIF, SVG, WebP, gere Data URI e fundos CSS
Verificador de Diferenças de Texto
Compare diferenças entre dois textos ou arquivos com visualização lado a lado destacada