01 / Exemplo
Exemplo
Sua entrada
h1 { color: #334155; margin: 0; }
p { line-height: 1.5; }Resultado
h1{color:#334155;margin:0}p{line-height:1.5}Formatação de código / MULTIVERTO
Minimizar CSS
Remova apenas espaços de formatação dispensáveis de uma folha de estilo CSS.
Conversor interativoSua entrada permanece neste navegador. Nenhum texto é enviado para conversão.
O arquivo permanece no seu navegador.
Encadear ferramentas
Aplique cada ferramenta de texto ao resultado anterior. Fluxos de trabalho com texto ↗
Somente o nome da sequência e a ordem das ferramentas são salvos neste navegador. Sua entrada e seus resultados nunca são salvos.
02 / Guia
Minimizar CSS — Como funciona
O que muda nesta ferramenta
Remova espaços de formatação dispensáveis de uma folha de estilo CSS. Inspecione o resultado quando os espaços tiverem significado. O CSS compactado remove comentários comuns e alguns espaços ao redor de chaves, dois-pontos e ponto e vírgula. Os espaços que separam componentes de seletores continuam importantes. Compare a página renderizada antes de substituir a folha de estilo, sobretudo se houver propriedades personalizadas ou valores de funções.
Conheça o formato
A versão compacta remove comentários comuns e espaços de layout selecionados em torno da pontuação. É intencionalmente menos agressiva do que um minificador CSS de produção. Verifique uma página que usa a folha de estilo depois de copiar o resultado.
Um fluxo de trabalho confiável
A compactação é útil quando uma máquina consome o resultado e o recuo para leitura humana é desnecessário. Primeiro verifique se o código fonte não modificado funciona, depois inspecione o que a operação remove. Esta ferramenta não reivindica a mesma redução de tamanho que um minificador de produção: tais ferramentas podem analisar a gramática completa, reescrever identificadores, simplificar valores constantes ou aplicar compressão após serialização. Aqui a política é conservadora, então uma construção incerta deve permanecer intacta ou causar um erro. No exemplo ao vivo, “h1 { color: #334155; margin: 0; } p { line-height: 1.5; }” torna-se “h1{color:#334155;margin:0}p{line-height:1.5}”. Leia a pontuação, bem como as palavras visíveis: essa pequena amostra é um resultado observável desta operação em particular. Altere uma regra importante no código original e compare o mesmo lugar no resultado. Uma folha de estilo compacta ainda pode conter URLs e valores de dados entre aspas. Tente um URL de fundo com pontuação e uma expressão de cálculo que requeira espaços em torno de operadores. Se a etapa de compilação de destino tiver seu próprio minifier, compare seu resultado separadamente em vez de assumir que dois compactadores aplicam regras idênticas.
Verifique o resultado
Use isso para uma pequena folha de estilo antes de colá-la em um sistema que aceita CSS simples. Verifique a página renderizada, não apenas a contagem de bytes: um espaço em um seletor descendente, uma string dentro do conteúdo e os espaços em calc() podem carregar significado. Um pipeline de produção pode fazer mais do que esse compactador conservador, incluindo prefixação e agrupamento. Mantenha o original ao lado da saída e teste um pequeno exemplo conhecido antes de manipular um documento grande. Compare conteúdo significativo, não apenas o tamanho do arquivo ou o número de linhas. Verifique nomes, strings entre aspas, caracteres não ASCII, terminações de linha e quaisquer campos repetidos após a transformação.
CSS — Entrada
Ler e transformar estrutura
CSS — Resultado
Explorar guias