Minificar e embelezar CSS
Cole uma folha de estilo para compactá-la para produção ou organizá-la de forma legível, e veja quantos bytes você economiza.
Funciona inteiramente no seu navegador
- Entrada
- 0
- Saída
- 0
- Variação
- 0%
Entrada de até cerca de 10 MB. Remove só espaços em branco e comentários; não junta regras, não reescreve valores nem remove CSS não usado.
Como minificar ou embelezar CSS
- Cole seu CSS na caixa ou clique em Inserir exemplo.
- Escolha Minificar para compactar ou Embelezar para organizar com a sua indentação. Ao minificar, marque ou desmarque a opção de comentários de licença.
- Confira o tamanho economizado e depois copie o resultado ou baixe como arquivo
.css.
Como minificar CSS sem quebrá-lo
Minificar CSS significa remover tudo o que o navegador ignora: comentários, indentação, quebras de linha e os espaços em volta da pontuação. Arquivos menores são baixados e lidos mais rápido, e numa folha de estilo grande a economia costuma ficar entre um quarto e metade do tamanho antes da compressão. As regras e a ordem delas ficam exatamente como foram escritas.
A parte difícil é saber quais espaços o navegador ignora. Um espaço entre dois seletores, como em nav a, é um combinador que significa “qualquer descendente”, então nav a e nava são coisas diferentes. Dentro de calc(1rem + 2px), os espaços em volta do + são obrigatórios, e calc(1rem+2px) é inválido. O texto entre aspas e dentro de url() é dado, não sintaxe. Um minificador feito com expressões regulares costuma errar em algum desses casos; este lê a folha de estilo como uma sequência de tokens e só remove espaços onde a gramática os torna opcionais.
Embelezar é o caminho inverso: uma declaração por linha, indentada dentro das chaves, para que um arquivo minificado de uma CDN vire algo que você consegue ler e comparar.
Dicas
- Vai organizar a página inteira, não só a folha de estilo? Use Formatar e embelezar HTML.
- Escolhendo cores para a folha de estilo? O Conversor de cores e contraste transforma hex em RGB, HSL e mais.
- Confira o que a minificação realmente mudou comparando as duas versões em Comparar textos.
Perguntas frequentes
Meu CSS é enviado para algum lugar?
Não. A minificação roda no seu navegador, e a biblioteca de embelezamento só é carregada deste site se você escolher Embelezar. Sua folha de estilo nunca é enviada para lugar nenhum.
O que exatamente Minificar muda?
Remove comentários e os espaços em volta de chaves, ponto e vírgula, vírgulas e combinadores (>, ~, +), e tira o último ponto e vírgula de cada bloco. Mantém o espaço em a b (o combinador de descendente), em and (min-width: ...) e em volta de + e - dentro de calc(), clamp(), min() e max(), onde removê-lo quebraria o valor.
Ele mexe em strings e url()?
Não. Tudo o que está entre aspas, inclusive texto que parece um comentário ou uma chave, e o conteúdo de url() são copiados caractere por caractere.
Ele encurta cores ou números?
Não. Valores como #336699, 0.5em e 0px ficam como foram escritos. Essas reescritas economizam pouco e trazem algum risco, então só saem espaços em branco e comentários.
Como sei que o CSS minificado é seguro?
Depois de cada execução, a página lê o seu original e o resultado com o próprio parser de CSS do navegador e compara o que ele entende. Se houver diferença, um aviso aparece acima do resultado. Se forem iguais, o navegador vê as mesmas regras.
O que são comentários de licença?
Comentários que começam com /*! são mantidos por convenção pelos minificadores, porque trazem texto de direitos autorais ou de licença que uma licença pode exigir que você preserve. Desative a opção para removê-los também.