Minificar CSS online, direto no seu navegador
Para minificar CSS aqui, basta colar sua folha de estilos: a ferramenta tira os comentários, as quebras de linha e cada espaço de que o navegador não precisa. A versão compactada aparece logo abaixo em uma fração de segundo, com o número exato de bytes economizados. Você não instala nada, não precisa de etapa de build e nada do que você cola é enviado: tudo acontece online, no seu navegador.
Como minificar CSS passo a passo
- Cole ou digite seu CSS na caixa CSS original.
- Um instante depois que você para de digitar, o CSS minificado aparece abaixo, com o tamanho original, o novo tamanho e a porcentagem economizada. Não há botão para apertar.
- Toque em Copiar para a área de transferência para colar no seu projeto, ou em Baixar .min.css para salvar como arquivo.
Um CSS com erro nunca trava a ferramenta: ele é minificado até onde pode ser lido. Assim, você pode colar um código pela metade e corrigir depois.
O que este minificador CSS tira do código
Cada regra continua funcionando exatamente como antes; só some o que está lá para olhos humanos. Os comentários saem, os espaços em branco encolhem, somem os espaços em volta de chaves, dois-pontos e vírgulas, e o último ponto e vírgula antes de fechar uma chave é retirado. Textos entre aspas, valores url() e caracteres escapados são copiados sem mudança, então algo como "a b" mantém o espaço.
Antes: /* Buttons */ .btn { color: #fff; margin: 0 auto; }
Depois: .btn{color:#fff;margin:0 auto}
Comprimir CSS: quanto o arquivo diminui?
Depende de quantos comentários e espaços o arquivo tem. Folhas de estilo bem comentadas e bem indentadas costumam encolher de um quarto até a metade. Abaixo do resultado você vê o tamanho original, o tamanho minificado e a porcentagem exata de economia.
Um arquivo menor baixa mais rápido e a página aparece mais cedo. Para transferir ainda menos, seu servidor web também pode enviar o arquivo minificado com gzip ou Brotli.
Manter ou tirar os comentários de licença
Comentários que começam com /*! costumam trazer a licença ou o aviso de copyright de uma biblioteca. Eles são mantidos por padrão, porque muitas licenças exigem que o aviso acompanhe o código.
Desmarque Manter comentários de licença, abaixo da caixa de entrada, para tirar esses também e ficar com o menor arquivo possível.
Reduzir CSS para produção sem riscos
O CSS minificado é seguro em um site no ar: faltam apenas caracteres que não mudam a forma como o navegador lê a folha de estilos. Guarde seu arquivo legível como fonte e publique a versão .min.css, por exemplo style.css ao lado de style.min.css.
Perguntas frequentes
O que faz um CSS minifier?
Ele remove tudo de que o navegador não precisa para ler seus estilos: comentários, quebras de linha, recuos, os espaços em volta de chaves, dois-pontos e vírgulas, e o último ponto e vírgula de cada regra. O resultado funciona exatamente como o original, mas é menor, então baixa mais rápido.
Como minificar CSS online?
Cole seu CSS na caixa “CSS original”. A versão minificada aparece logo abaixo, junto com os bytes economizados. Toque em “Copiar para a área de transferência” para colar no projeto ou em “Baixar .min.css” para salvar como arquivo.
Compactar CSS é o mesmo que minificar?
Sim, no uso do dia a dia as duas coisas significam diminuir o texto sem mudar o que ele faz. Cole a folha de estilos aqui e copie ou baixe o resultado compactado. Para transferir ainda menos, seu servidor web pode aplicar gzip ou Brotli ao arquivo minificado.
Como tirar todos os comentários de um CSS?
Cole seu CSS e desmarque “Manter comentários de licença”. Assim todos os comentários são apagados, inclusive os que começam com /*!. Se deixar a opção marcada, só esses avisos de licença ficam.
CSS minificado é seguro em produção?
Sim. A minificação só tira caracteres que não influenciam a forma como o navegador lê a folha de estilos. Textos entre aspas, valores url() e caracteres escapados são copiados exatamente como você escreveu. Guarde o arquivo original como fonte e publique a versão .min.css.
O que é um arquivo .min.css?
É a cópia minificada de uma folha de estilos, chamada assim por convenção para ficar ao lado da fonte legível, como style.css e style.min.css. Edite o arquivo legível e use o .min.css no site publicado.
Dá para voltar um CSS minificado ao normal?
Não exatamente, porque a formatação original se perde, mas você pode deixá-lo legível de novo. Cole o código minificado no Formatador de Código para recuperar os recuos. Comentários removidos não voltam, então guarde sempre o arquivo original.
E se o meu CSS tiver erros?
A ferramenta não trava. O CSS é minificado até onde pode ser lido, então você pode colar um código incompleto e corrigir depois.
