← Início

Minificador de CSS

Minifica CSS removendo comentários e espaços desnecessários e mesclando regras duplicadas, ou faz o inverso e reformata com uma declaração por linha. Os dois sentidos usam analisadores de verdade (csso e js-beautify), de modo que texto parecido com comentário dentro de uma string content:, os espaços em calc() e os URIs data: ficam intactos.

CSS de Entrada
Opções
(usado apenas pelo Embelezar)

Minificar vs. Embelezar

Minificar remove comentários e espaços em branco desnecessários e mescla com segurança regras duplicadas para produzir o menor CSS possível — útil para reduzir uma folha de estilos antes de publicá-la. Embelezar faz o oposto: reindenta tudo com uma declaração por linha, para que um arquivo minificado ou bagunçado volte a ficar legível. Ambos são movidos por analisadores de CSS reais (csso e js-beautify), de modo que conteúdos delicados como um texto parecido com comentário dentro de uma string content:, espaços dentro de calc() e URIs data: são preservados, em vez de serem quebrados por uma simples substituição de texto.

Como usar o Minificador de CSS

  1. Cole — cole o CSS que deseja minificar ou embelezar na caixa de entrada acima.
  2. Escolha a indentação — selecione entre 2 espaços, 4 espaços ou tab (aplica-se apenas ao resultado do Embelezar; não afeta a minificação).
  3. Execute — clique no botão "Minificar" ou "Embelezar" e o processamento acontece instantaneamente dentro do navegador.
  4. Copie — confira o indicador de tamanho reduzido e use o botão "Copiar" para levar o resultado à área de transferência.

Minificar corre o risco de alterar meus estilos?

Não. Esta ferramenta não faz uma busca e substituição cega de texto: ela usa um analisador de CSS real (csso) que entende a folha de estilos como uma árvore sintática e depois a otimiza com segurança. Assim, textos parecidos com comentários dentro de content:, espaços significativos dentro de calc(), URIs data: e prefixos de fornecedor são preservados, e o resultado renderizado não muda.

Quanto o tamanho é reduzido?

Depende do estado do original, mas um CSS legível, cheio de comentários e indentação, costuma ficar de 30 a 60% menor. Um arquivo já minificado encolhe pouco. Ao terminar a conversão, o indicador de tamanho mostra na hora quantos bytes e qual porcentagem foram reduzidos em relação ao original. Somando a compressão gzip ou brotli no envio pelo servidor, o volume real transferido diminui ainda mais.

Quando devo usar o Embelezar?

O Embelezar é útil quando você precisa ler ou editar um CSS já minificado em uma única linha ou um arquivo com indentação bagunçada. Ele reorganiza tudo com uma declaração por linha e indentação consistente, o que facilita depurar uma folha de estilos publicada ou entender o código de outra pessoa. Na hora de publicar novamente, basta voltar ao "Minificar".

Meu CSS é enviado para algum lugar?

Não. Tanto o minificador quanto o embelezador rodam inteiramente dentro do seu navegador usando bibliotecas auto-hospedadas — seu CSS nunca é enviado nem armazenado em nenhum servidor. Após a conversão, o indicador de tamanho mostra quantos bytes a minificação economizou, e o botão Copiar coloca o resultado diretamente na sua área de transferência.