Minificar CSS online – Comprima ou formate seu CSS
Reduza suas folhas de estilo ou deixe um CSS minificado legível de novo. O minificador remove comentários e espaços sem quebrar calc(), textos ou seletores; o formatador organiza o código com recuos limpos.
Cole o CSS e escolha Minificar ou Formatar. Minificar remove comentários (você pode manter as notas de licença /*!), espaços, espaços em volta de chaves, dois-pontos e vírgulas e o último ponto e vírgula de cada bloco, mostrando os bytes economizados. Formatar coloca cada declaração numa linha com recuo.
Como usar: Minificador e formatador de CSS
- Cole o seu CSS.
- Escolha Minificar ou Formatar.
- Decida se mantém os comentários de licença /*!.
- Confira a diferença de tamanho.
- Copie ou baixe o resultado.
O que a minificação de CSS remove
A minificação apaga tudo o que o navegador ignora: comentários, recuos, quebras de linha, espaços em volta de { } : ; , > e ~ e o último ponto e vírgula antes de cada chave de fechamento. As regras não mudam, então a página fica exatamente igual.
| Antes | Depois |
|---|---|
| `.card > h2 , .card + .card {` | `.card>h2,.card+.card{` |
| `margin : 0 auto ;` | `margin:0 auto;` |
| `calc( 1rem + 2vw )` | `calc(1rem + 2vw)` |
| `/ comentário /` | removido |
Minificação segura
Alguns espaços importam. Dentro de calc() os espaços em volta de + e − são obrigatórios, então são mantidos. Textos entre aspas, como valores de content ou nomes de fontes, são copiados sem mudança. Um espaço antes dos dois-pontos num seletor (`a :hover`) muda o significado, por isso só os espaços depois dos dois-pontos são removidos. Comentários de licença que começam com /*! ficam por padrão, porque muitas licenças de código aberto exigem isso.
Formatar CSS minificado
Recebeu um arquivo minificado de um tema ou framework e precisa ler ou editar? Troque para Formatar. Cada regra começa numa linha nova, as declarações ganham recuo e cada seletor de uma lista fica na própria linha. Media queries e outras regras @ ganham um nível a mais de recuo.
Quanto se economiza?
Folhas de estilo escritas à mão costumam diminuir 15–35 %. Somado ao gzip ou Brotli e à remoção de regras não usadas, o CSS minificado carrega antes e bloqueia a renderização por menos tempo. O CSS bloqueia a renderização, então cada kilobyte no caminho crítico pesa no Largest Contentful Paint.
Guarde o original
Mantenha sempre a folha de estilos legível no controle de versão e minifique uma cópia na publicação, para nunca editar um arquivo minificado à mão.
Ferramentas relacionadas
Minifique o HTML com o Minificador de HTML, converta pixels com Conversor de px para rem e gere o CSS de sombras, gradientes e cantos com o Gerador de box-shadow CSS, o Gerador de gradiente CSS e o Gerador de border-radius. Tudo roda no navegador.
Você também pode gostar destas ferramentas grátis: Formatador JSON, Gerador de senha e Testador de regex.
Perguntas frequentes
Como minifico CSS?
Cole seu CSS na ferramenta com Minificar selecionado e copie o resultado.
Minificar pode quebrar meu CSS?
Não. Os espaços que importam, como dentro de calc(), são mantidos e os textos não mudam.
Como desminifico CSS?
Troque para Formatar para organizar o código com recuos e quebras de linha.
Devo manter os comentários de licença?
Sim, se o código vem de um projeto de código aberto. Os que começam com /*! ficam por padrão.
Meu CSS é enviado?
Não. Tudo é processado no navegador.
Última atualização: