Formatador e Minificador CSS

Formatador CSS - Formatar e Embelezar CSS Online

Ferramenta poderosa de formatador e embelezador CSS online que ajuda você a formatar, embelezar e minificar código CSS. Recursos incluem destaque de sintaxe, indentação personalizável e opções de expansão de seletores.

Qual a diferença entre formatar e minificar CSS?

Formatar (também chamado de embelezar ou imprimir bonito) reorganiza sua folha de estilos para legibilidade humana: uma declaração por linha, indentação consistente, linhas em branco entre blocos de regras e dois-pontos alinhados. Minificar faz o oposto — remove cada byte que o navegador não precisa: espaços em branco, comentários, o último ponto e vírgula de cada bloco, aspas redundantes e prefixos de vendor não usados. Uma folha de estilos típica do tamanho do Bootstrap encolhe de cerca de 180 KB formatada para 140 KB minificada, e para aproximadamente 22 KB após gzip por cima. Sempre faça check-in da versão não minificada no controle de fonte e minifique como parte do seu pipeline de build — depurar CSS minificado em DevTools é doloroso sem source maps, e source maps permitem manter os dois mundos.

Quanto menor meu CSS ficará após minificar, e que economia de gzip posso esperar?

CSS escrito à mão normalmente encolhe 20-40% ao minificar — a economia vem de remover indentação, quebras de linha, comentários e o último ponto e vírgula de cada bloco. CSS que já é compacto (ou já minificado) economiza bem menos. Depois de clicar em Minificar, esta ferramenta mostra um relatório real de antes/depois: seu tamanho original, o tamanho minificado, os bytes e o percentual exatos economizados, além de um tamanho gzip estimado. O número de gzip é o que mais importa em produção porque os servidores quase sempre servem CSS comprimido: texto como CSS é muito repetitivo, então gzip (ou Brotli) costuma cortar mais 70-80% do tamanho minificado, o que significa que uma folha de estilos minificada de 140 KB muitas vezes trafega como cerca de 20-30 KB pela rede. Trate o número de gzip aqui como uma estimativa de uma heurística de repetição, não um resultado exato em bytes — o nível de compressão do seu servidor e a escolha entre Brotli e gzip vão alterá-lo um pouco. A conclusão principal: minifique para cortar o custo de parsing e o tamanho de origem, e sempre habilite gzip/Brotli no servidor para a maior parte da economia de transferência.

Esta ferramenta altera minhas cores hex ou valores rgb?

Não. Esta ferramenta preserva suas cores exatamente como escritas — #FFFFFF continua #FFFFFF, rgb(255, 0, 0) permanece igual, e a moderna sintaxe com barra rgb(255 0 0 / 0.5) é mantida literalmente. Aqui formatar apenas realinha espaços em branco, indentação e quebras de linha; minificar apenas remove os bytes que o navegador não precisa. Nenhuma das passagens reescreve os tokens de cor, então seus valores de marca e qualquer formatação sensível a diff sobrevivem intactos. Se você quer especificamente normalização de cor (encurtar #aabbcc para #abc, deixar o hex minúsculo ou converter rgb() para hex), use um otimizador dedicado como PostCSS com cssnano ou csso no seu pipeline de build — eles fazem otimizações que esta ferramenta intencionalmente deixa por sua conta. Lembre que hex de três dígitos (#abc) só equivale a #aabbcc quando cada par é idêntico, então #336699 pode encurtar para #369 mas #336698 não.

Como os seletores CSS são formatados na saída?

Ao Formatar, cada seletor separado por vírgula vai em sua própria linha para que um seletor composto longo como h1, h2, h3, h4, h5, h6 seja fácil de escanear e editar. Combinadores (>, +, ~) e espaços em branco descendentes são normalizados para espaços únicos consistentes pelo motor Prettier. Seletores de atributo mantêm suas aspas originais, e pseudo-classes e pseudo-elementos permanecem anexados ao seu elemento precedente sem espaço em branco (a:hover, ::before). Seus seletores nunca são reescritos por especificidade: a ferramenta não remove seletores universais nem altera de outra forma o que um seletor combina, então :where() e :is() do Selectors Level 4 são preservados exatamente como escritos (lembre que :where tem especificidade zero enquanto :is assume a maior especificidade de seus argumentos). Minificar mantém os mesmos seletores e apenas remove o espaço em branco ao redor deles.

O que acontece com prefixos de vendor como -webkit- ou -moz- durante a formatação?

Apenas a formatação nunca adiciona ou remove prefixos de vendor — apenas realinha espaços em branco. A ferramenta de prefixos empacotada é uma passagem opcional separada. A recomendação moderna conforme caniuse.com é manter CSS visando sua matriz de navegadores suportados e deixar Autoprefixer ou PostCSS injetar os prefixos certos em tempo de build a partir da configuração Browserslist. Em 2026, a maioria dos prefixos -webkit- para transforms, transitions, animations, gradients e flexbox são desnecessários em qualquer navegador lançado após 2020; prefixos -ms- eram específicos do IE 10-11 e Edge Legacy, ambos em fim de vida. Remover prefixos não usados pode economizar 5-15% do tamanho do CSS em bases de código legadas. Esta ferramenta preserva cada prefixo que você escreve (tanto Formatar quanto Minificar deixam as declarações -webkit-, -moz-, -ms- e -o- exatamente como o autor escreveu); para realmente adicionar ou remover prefixos conforme um alvo Browserslist, rode Autoprefixer ou PostCSS no seu passo de build.

Devo usar propriedades abreviadas como margin: 10px 20px ou longas como margin-top, margin-right?

Abreviada ganha em bytes e legibilidade quando você está definindo o conjunto completo junto: margin: 10px 20px são 18 bytes contra 53 para as quatro declarações longas. Mas abreviada tem uma armadilha oculta: ela REINICIA cada longa que cobre, mesmo as que você não mencionou. Escrever background: red mais tarde na cascata apaga background-image, background-repeat, background-position — todos definidos para seus valores iniciais. Isso torna abreviada perigosa em CSS de componentes onde uma regra pai pode ter definido longas individuais. Como regra: use abreviada em resets e camadas base onde você intencionalmente começa do zero; use longa em sobrescritas de componentes onde você quer alterar um eixo sem tocar nos outros. Este formatador não converte entre abreviada e longa — ele preserva sua intenção autoral.

Como o formatador lida com recursos CSS modernos como aninhamento, propriedades customizadas e container queries?

CSS Nesting (tornou-se Baseline 2023, sem preprocessador necessário) é formatado com cada regra aninhada indentada um nível abaixo de seu pai, e o seletor & preservado literalmente. Propriedades customizadas (--minha-cor: azul) e referências var() são deixadas intocadas — mesmo valores incomuns como calc(var(--x) + 10px) mantêm seu espaço em branco interno, já que valores de propriedades customizadas CSS preservam tokens. Container queries (@container) recebem a mesma formatação de bloco que queries @media e @supports, incluindo quaisquer condições container-name. Camadas de cascata (@layer base, components, utilities) preservam sua ordem de declaração, que é semanticamente significativa — reordenar camadas mudaria a cascata. Registros @property do CSS Houdini e blocos @scope são reconhecidos e formatados com indentação apropriada.

Por que meus comentários estão desaparecendo ou sendo movidos durante a formatação?

CSS padrão suporta apenas comentários /* ... */ — // é inválido em CSS puro (é um recurso do Sass/Less). Esta ferramenta segue a convenção da maioria dos minificadores: ao Minificar, comentários /* regulares */ são removidos para economizar bytes, mas comentários de licença que começam com /*! são mantidos literalmente para que os cabeçalhos de atribuição e licença sobrevivam em produção. Ao Formatar, todos os comentários são preservados e mantidos em sua própria linha acima ou ao lado da regra que descrevem. Se você vê comentários se comportando de forma inesperada, verifique se sua fonte inclui template literals CSS-in-JS ou sintaxe Sass — esses requerem ferramentas diferentes. Como formatar apenas reorganiza espaços em branco, formatar a mesma entrada duas vezes produz saída idêntica.

Qual a diferença entre as funções calc(), clamp() e min()/max()?

Todas as quatro são funções matemáticas definidas em CSS Values and Units Module 4, aceitas em qualquer contexto de comprimento, porcentagem, número ou ângulo. calc(100% - 20px) realiza aritmética entre unidades que o navegador não pode pré-resolver. min(50vw, 800px) retorna o menor de dois valores — útil para limitar larguras fluidas. max(16px, 1rem) retorna o maior — útil para mínimos de acessibilidade em valores sensíveis ao zoom do usuário. clamp(16px, 4vw, 32px) é a combinação assassina: retorna o valor do meio quando o segundo argumento está entre o primeiro (mínimo) e o terceiro (máximo), tornando-a a forma canônica de escrever tipografia fluida sem media queries. Aninhamento é permitido: calc(min(100%, 1200px) - 2rem). O formatador preserva o espaço em branco dentro dessas funções porque operadores exigem espaços em ambos os lados conforme a spec.

Recursos Principais

• Formatar CSS com indentação personalizável
• Minificar CSS para reduzir tamanho de arquivo
• Relatório de economia da minificação: tamanho original vs minificado, bytes economizados, percentual de redução e tamanho gzip estimado
• Preserva strings, url() e URIs data: intactos ao minificar
• Mantém as queries @media, @supports e @container válidas
• Mantém comentários de licença /*! e remove comentários comuns ao minificar
• Destaque de sintaxe para seletores e propriedades
• Estatísticas da saída (caracteres, linhas, tamanho)
• Copiar CSS formatado
• Baixar como arquivo .css
• Processamento 100% no navegador