Embelezador CSS e Minificador
Formate CSS confuso ou reduzido em folhas de estilo limpas e legíveis ou comprima CSS formatado para reduzir o tamanho do arquivo. Ajuste o recuo, a formatação do seletor e o tratamento de comentários. Tudo roda no seu navegador; seu código nunca é carregado.
Como embelezar e decorar Minificar CSS on-line
Compreendendo os dois modos
As folhas de estilo CSS geralmente terminam em dois estados: minificado (sem espaço em branco, uma linha, difícil de ler) ou formatado de forma inconsistente (recuo misto, quebras de linha estranhas). Esta ferramenta lida com ambas as direções:
- Embelezar expande CSS compactado em um layout legível usando o maduro
js-beautifybiblioteca. O recuo, a formatação do seletor e o espaçamento entre as regras são todos configuráveis. - Minimizar remove comentários e espaços em branco desnecessários para reduzir os bytes fornecidos aos usuários — útil para enviar CSS de produção quando você não tem uma etapa de construção.
Como usar esta ferramenta
- Cole seu CSS no painel de entrada à esquerda.
- Escolha suas opções de recuo e formatação na barra de ferramentas.
- Clique Embelezar para formatar ou Minimizar para comprimir.
- Copie o resultado, baixe-o como um
.cssarquivo ou clique em Usar como entrada para operações em cadeia.
A ferramenta lida com CSS padrão, bem como sintaxe aninhada semelhante a SCSS, consultas de mídia, quadros-chave e variáveis CSS. Todo o processamento acontece localmente no seu navegador.
Perguntas frequentes
Meu CSS é carregado em algum lugar?
Não. Tanto o embelezador quanto o minificador são executados inteiramente no seu navegador usando JavaScript do lado do cliente. Seu código nunca sai do seu dispositivo e nada é registrado.
Quanto a minificação realmente economiza?
Para folhas de estilo típicas manuscritas ou não minificadas, espere uma redução de tamanho de 20 a 40% após a minificação, principalmente pela remoção de comentários, recuo e novas linhas. No CSS já compacto a economia é menor. O painel de saída mostra o delta de bytes exato.
O minificador quebrará meu CSS?
O minificador remove apenas espaços em branco, comentários e um ponto e vírgula no final de cada bloco de regras. Ele não reescreve seletores, mescla regras ou reordena propriedades, portanto, a saída é comportamentalmente idêntica à entrada.
Suporta SCSS ou LESS?
Ele formata regras aninhadas e comentários de linha no estilo SCSS (//) bem o suficiente para uso casual, mas não é um compilador SCSS. Para fluxos de trabalho SCSS/LESS reais, compile primeiro em CSS e depois formate aqui, se necessário.
Suporta variáveis CSS, @supportse sintaxe moderna?
Totalmente suportado. Propriedades personalizadas (--var), @supports, @container, aninhamento, :is()/:where(), e color-mix() todos passam corretamente nos modos embelezar e reduzir.