Minhas ferramentas

MINIFICADOR DE CSS / CSSO

Minificador de CSS

Minificação estrutural, menor que só remover espaços.

Roda localmente · o código não é enviado
Opções

SEU PRÓXIMO PASSO

Conecte ferramentas úteis ao fluxo de trabalho da sua empresa

Crie uma conta empresarial para configurar monitoramento de sites, e-mail comercial e notificações e convide sua equipe para trabalhar junto.

Empresas novas recebem um teste Pro de 14 dias, sem cartão. Os testes não incluem a concessão mensal paga de créditos.

Já tem uma conta? Abra seu espaço de trabalho →

Como usar

  1. Cole o código, solte um arquivo ou carregue o exemplo; a linguagem já vem definida para esta página e pode ser alterada.
  2. Escolha formatar ou minificar e ajuste indentação, largura e outras opções; o resultado aparece à direita enquanto você digita.
  3. Copie ou baixe o resultado; em caso de erro, use "Ir para o erro", corrija e execute novamente.

O que a minificação faz

A minificação muda como o código é escrito, não o que ele faz. Normalmente reduz 30–70% do tamanho e acelera as páginas; guarde o código-fonte, porque código minificado é difícil de ler.

Três minificadores
OperaçãoJavaScript (Terser)CSS (CSSO)HTML / XML / JSON
Remover comentários✓✓✓
Remover espaços e quebras de linha✓✓✓
Encurtar nomes de variáveis✓——
Mesclar regras, encurtar cores—✓—
Eliminar código morto, simplificar constantes✓——
Manter comentários de licença /*!OpcionalOpcionalOpcional

Linguagens e mecanismos

A formatação usa os mesmos mecanismos de código aberto de editores populares, então os resultados coincidem com o Prettier no VS Code e sua equipe pode manter um único estilo. Todos os mecanismos são carregados deste site e rodam no seu navegador.

Idioma
IdiomaFormatoComprimir
HTMLPrettier 3✓ comentários e espaços
XMLMecanismo XML do XunL✓
CSS / SCSS / LessPrettier 3✓ reestruturação CSSO
JavaScript / TypeScriptPrettier 3 (Babel)✓ Terser (apenas JavaScript)
JSONPrettier 3✓ números grandes mantêm a precisão
YAMLPrettier 3— (comentários mantidos)
SQLsql-formatter (14 dialetos)—

Perguntas frequentes

"Mesclar regras duplicadas" é seguro?

O CSSO mescla regras só quando o resultado da cascata continua o mesmo. Se uma página depende da ordem das regras e fica estranha, desative isso para uma minificação básica.

Meu código é enviado?

Não. Os mecanismos são baixados deste site e rodam no seu navegador; seu código nunca passa pelos nossos servidores nem por terceiros, então é seguro para código e configurações internas.

Qual o tamanho máximo dos arquivos?

Até 5 MB por arquivo; acima de 300 KB a página espera o botão em vez de formatar enquanto você digita, para manter o navegador responsivo.

guia prático do minificador de CSS e perguntas frequentes

O que faz um minificador de CSS?

O CSSO 5 remove comentários e espaços, encurta #ff0000 para red e 0px para 0 e mescla regras do mesmo seletor quando o resultado da cascata não muda.

Para quem é e quando é útil?

Criadores de sites, de landing pages e qualquer pessoa acelerando um site que queira uma folha de estilos menor antes de publicar.

Como uso este minificador de CSS?

Cole CSS para minificar com o CSSO: comentários e espaços removidos, cores encurtadas e regras duplicadas mescladas, com a economia exibida.

Como devo interpretar os resultados?

A mesclagem de regras infere a ordem; desative-a se uma página que depende da ordem de sobreposição ficar estranha. Comentários de licença /*! podem ser mantidos.

Onde o trabalho é feito e quais serviços recebem dados?

O CSSO minifica as folhas de estilos no seu navegador; nada é enviado.