Formatador e Minificador CSS

Formatador CSS online gratuito. Formate, embeleze e minifique código CSS com destaque de sintaxe. Perfeito para desenvolvedores web trabalhando com folhas de estilo.

Tem feedback? Reporte bugs, sugira recursos ou compartilhe suas ideias — lemos todos

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.

Por que meu formatador alterou minhas cores hex ou valores rgb?

Um bom formatador CSS normaliza formas de cor equivalentes para um estilo consistente — tipicamente hex mais curto quando possível, letras minúsculas e sintaxe rgb()/rgba()/hsl() consistente. #FFFFFF torna-se #fff, rgb(255, 0, 0) torna-se #f00, e a moderna sintaxe com separador de barra rgb(255 0 0 / 0.5) pode ser normalizada para a forma legada com vírgula para compatibilidade com navegadores antigos. Nenhuma dessas altera a cor renderizada. Hex de três dígitos (#abc) só funciona quando cada par de dígitos hex é idêntico (#aabbcc), então #336699 pode tornar-se #369 mas #336698 não. Hex de quatro dígitos (#abcd) estende isso para cores com alfa (CSS Color Module 4). Se seu pipeline depende de um formato específico para diffing ou consistência de marca, esta ferramenta oferece uma opção "Preservar cores originais".

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

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 com padding consistente. Seletores de atributo mantêm suas aspas originais. Pseudo-classes e pseudo-elementos permanecem anexados ao seu elemento precedente sem espaço em branco (a:hover, ::before). Seletores universais que podem ser omitidos com segurança são removidos: *.btn torna-se .btn, *#id torna-se #id. As pseudo-classes :where() e :is() do Selectors Level 4 são preservadas como escritas porque seu comportamento de especificidade difere (:where tem especificidade zero, :is assume a maior especificidade de seus argumentos).

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 economiza 5-15% do tamanho do CSS em bases de código legadas. Este formatador mostra o uso de prefixos em seu painel de análise.

Formatador e Minificador CSS — Formatador CSS online gratuito. Formate, embeleze e minifique código CSS com destaque de sintaxe. Perfeito para desenvol — **Formatador e Minificador CSS**

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). Comentários de licença no topo de arquivos começando com /*! são preservados pela maioria dos minificadores; comentários /* regulares */ são tipicamente removidos durante a minificação mas mantidos durante a formatação. Comentários inline ao final de linha (após um ponto e vírgula) são normalizados para a mesma linha, enquanto comentários iniciais flutuam para sua própria linha acima da regra. Se você vê comentários se movendo inesperadamente, verifique se sua fonte inclui template literals CSS-in-JS ou sintaxe Sass — esses requerem ferramentas diferentes. Este formatador preserva a relação comentário-regra ancorando cada comentário ao próximo token não-comentário.

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.