Como funciona
O minificador remove /* comentários */, recolhe execuções de espaços em branco em um único espaço, remove espaços em torno da pontuação estrutural, como { } : ; , > e elimina o ponto e vírgula final antes de uma chave de fechamento. Ele não renomeia seletores, mescla regras ou reordena a cascata.
- Um minificador conservador: não remove regras não utilizadas nem reescreve valores. Sempre teste novamente a folha de estilo depois.
Por que isso importa
Cada kilobyte de CSS de bloqueio de renderização atrasa a primeira pintura. A minificação é a vitória mais barata disponível após a remoção de regras não utilizadas, e uma ferramenta que toca apenas em caracteres comprovadamente redundantes pode ser confiável em uma etapa de construção sem redefinir sua folha de estilo.
Um exemplo trabalhado
Uma regra escrita como .card { color: red; preenchimento: 10px 20px; } torna-se .card{color:red;padding:10px 20px}, economizando algumas dezenas de bytes por regra e muito mais em uma folha de estilo real.
Erros comuns
- Removendo espaços em torno de + e - dentro de calc(), exigido pela especificação.
- Minimizando SCSS ou LESS em vez de CSS compilado.
- Ignorando a verificação visual após a minificação.
Dicas práticas
Mantenha a fonte não minificada no controle de versão e reduza como uma saída de compilação. Se você usar propriedades personalizadas com substitutos, compare os estilos computados no DevTools antes e depois — a cascata é preservada, mas um único espaço perdido pode alterar a forma como um valor é analisado.
Como usar
- Abra a ferramenta. Tudo roda na aba do seu navegador.
- Cole ou digite sua entrada e escolha a ação necessária.
- Verifique o resultado e copie-o com um clique.
Perguntas comuns
Remove regras CSS não utilizadas?
Não. Ele remove comentários e espaços em branco redundantes. A detecção de regras não utilizadas precisa de uma auditoria de página inteira.
Por que calc() parou de funcionar após a redução?
Espaços ao redor de + e - dentro de calc() são exigidos pela especificação CSS. Teste novamente a folha de estilo após a redução.
Pode minificar SCSS ou LESS?
Não. Ele espera CSS simples; os pré-processadores têm suas próprias etapas de construção.
Esta ferramenta é realmente gratuita?
Sim. Não há conta, acesso pago e limite de uso. O Tools App é financiado pela aumenso, o estúdio por trás dele.
Alguma coisa que eu inseri foi carregada?
Não. A ferramenta é executada na aba do seu navegador; o que você insere nunca é enviado para nós e nunca é armazenado.