Formatador CSS
Formate e embeleze código CSS. Expande CSS minificado, corrige indentação, normaliza espaço em branco e ordena propriedades opcionalmente.
Como Usar Formatador CSS
- 1Cole seu código CSS no editor.
- 2Escolha o tamanho da indentação (2 ou 4 espaços).
- 3Ative a ordenação opcional de propriedades para consistência.
- 4Copie a saída CSS formatada.
ZenovayAnalytics
Analytics feito para fundadores.
- Acompanhamento de visitantes em tempo real
- Privacidade em primeiro lugar, sem banner de cookies
- Configurado em dois minutos
Ferramentas Relacionadas
Formatador e Validador de JSON
Formate, valide e embeleze dados JSON com destaque de sintaxe e detecção de erros.Decodificador JWT
Decodifique e inspecione tokens JWT. Visualize cabeçalho, payload e verifique assinaturas.Codificar/Decodificar Base64
Codifique texto para Base64 ou decodifique Base64 de volta para texto. Suporta dados UTF-8 e binários.Encode/Decode de URL
Codifique ou decodifique componentes de URL. Trate caracteres especiais, strings de consulta e URLs completas.Perguntas Frequentes
O que faz o formatador de CSS?▾
O formatador pega CSS minificado ou formatado inconsistentemente e o reescreve com indentação, quebras de linha e espaçamento consistentes. Cada bloco de seletor tem sua chave de abertura na mesma linha, cada propriedade em sua própria linha com um ponto e vírgula à direita, e a chave de fechamento em sua própria linha. At-rules (@media, @keyframes, @supports) são manipuladas com formatação aninhada. A saída é imediatamente legível e amigável para diff.
Quais recursos de CSS são suportados?▾
Propriedades e valores CSS padrão, pseudo-classes (:hover, :focus, :nth-child), pseudo-elementos (::before, ::after), seletores de atributo ([type="text"]), at-rules aninhadas (@media, @supports, @keyframes, @layer, @container), múltiplos seletores (separados por vírgula), propriedades personalizadas (--var-name) e funções CSS modernas (clamp(), calc(), var()). Comentários CSS (/* ... */) são preservados.
O que é classificação de propriedades?▾
Quando a classificação de propriedades está ativada, as propriedades de CSS dentro de cada bloco de regra são classificadas alfabeticamente. Isso torna as folhas de estilo mais fáceis de verificar (você sempre sabe onde "background" vem antes de "color"), elimina debates sobre ordem de propriedades em revisões de código e produz diffs mais consistentes quando as propriedades são adicionadas. Ferramentas como o plugin "order" do Stylelint aplicam isso automaticamente.
O formatador mudará meus valores de CSS?▾
Não — apenas espaços em branco e indentação são modificados. Nomes de propriedades, valores, seletores e condições de at-rule são preservados exatamente como estão. O formatador não normaliza cores, adiciona prefixos de fornecedor ou reescreve propriedades abreviadas. É um reformatador puramente cosmético, não um pré-processador.
Como faço para formatar CSS no meu fluxo de trabalho?▾
Para fluxos de trabalho em equipe, use Prettier com o plugin CSS (prettier --write *.css) ou Stylelint com o sinalizador --fix. Ambos se integram com VS Code, ESLint e pipelines CI. Para formatação única sem configuração de cadeia de ferramentas, use este formatador online. Para usuários de PostCSS, o plugin postcss-prettify pode formatar CSS programaticamente.