Formatador de CSS
Formate CSS preservando seletores, declarações, comentários, valores e estrutura de regras at-rule.
Make CSS easier to review
CSS comprimido pode esconder seletores, declarações, comentários e valores longos em uma linha. O formatador mostra um layout legível.
A formatação muda a apresentação e não prova validade, eficiência, acessibilidade ou compatibilidade. Guarde a fonte e revise o diff.
Use uma amostra com seletores, declarações, comentários, custom properties, media queries e valores entre aspas.
Formatting is not CSS validation
CSS contém seletores, declarações, valores, comentários, at-rules, funções, custom properties e blocos. A indentação mostra limites e níveis.
O formatador organiza espaços e tokens, mas não prova padrões, especificidade, acessibilidade, desempenho ou compatibilidade do build.
Valores podem conter strings, URLs, escapes, gradientes, variáveis e extensões de fornecedor; preserve e teste no alvo.
How to format CSS
- Cole uma folha CSS completa ou fragmento compatível.
- Inspecione seletores, chaves, declarações, comentários, propriedades customizadas, funções e at-rules.
- Compare propriedades, valores, aspas, URLs, variáveis e ordem com a fonte.
- Execute linter, build, acessibilidade e testes de navegador.
- Remova URLs privadas, tokens e dados de usuário dos exemplos.
Formatting method
- Lê seletores, declarações,
Lê seletores, declarações, valores, comentários, blocos, funções e at-rules.
- Adiciona linhas e
Adiciona linhas e indentação para revisar regras e blocos aninhados.
- Preserva valores, strings,
Preserva valores, strings, URLs, custom properties, comentários e ordem.
Recuperação, dialeto, extensões vendor, comentários, espaços e erros exatos devem ser confirmados em um motor real.
Read the formatted result
O resultado é CSS legível. Confira seletores, declarações, valores, comentários, blocos, funções e ordem contra a fonte.
Uma falha não prova suporte exato do parser ou recuperação.
Problema de navegador, linter ou build é separado; formatar não otimiza desempenho.
Erros comuns
Confundir indentação com validação pode esconder valores inválidos, especificidade inesperada ou problemas de acessibilidade.
Alterar custom properties, strings, URLs, escapes ou ordem pode mudar comportamento.
Não suponha que extensão de fornecedor funcione em todas as ferramentas.
Colar URLs privadas, tokens ou estilos de usuários pode expor dados.
Limites e casos especiais
A função formata CSS e não garante padrões, lint, acessibilidade, segurança, desempenho, compatibilidade ou minificação.
Teste custom properties, at-rules, extensões, funções, escapes, comentários e folhas grandes com ferramentas reais.
Não cole estilos confidenciais sem autorização.
Examples
A formatação valida CSS?
A formatação valida CSS?
Cole uma folha CSS completa ou fragmento compatível.
O resultado é CSS legível. Confira seletores, declarações, valores, comentários, blocos, funções e ordem contra a fonte.
Muda o cascade?
Muda o cascade?
Inspecione seletores, chaves, declarações, comentários, propriedades customizadas, funções e at-rules.
Uma falha não prova suporte exato do parser ou recuperação.
Os valores são preservados?
Os valores são preservados?
Compare propriedades, valores, aspas, URLs, variáveis e ordem com a fonte.
Problema de navegador, linter ou build é separado; formatar não otimiza desempenho.
Os comentários são preservados?
Os comentários são preservados?
Execute linter, build, acessibilidade e testes de navegador.
O resultado é CSS legível. Confira seletores, declarações, valores, comentários, blocos, funções e ordem contra a fonte.
Pode formatar media query?
Pode formatar media query?
Remova URLs privadas, tokens e dados de usuário dos exemplos.
Uma falha não prova suporte exato do parser ou recuperação.
Melhora desempenho?
Melhora desempenho?
Cole uma folha CSS completa ou fragmento compatível.
Problema de navegador, linter ou build é separado; formatar não otimiza desempenho.
Frequently asked questions
A formatação valida CSS?
Não. Use parser, linter, build, acessibilidade e navegador.
Muda o cascade?
Devem mudar apenas espaços; compare ordem e teste.
Os valores são preservados?
Exemplos preservam valores, strings, URLs e funções; revise o diff.
Os comentários são preservados?
Exemplos mantêm comentários; confirme com seu input.
Pode formatar media query?
O exemplo mostra at-rule aninhado; confirme suporte.
Melhora desempenho?
Não. Use profiling e otimização específica.
Corrige CSS inválido?
Não presuma reparo; corrija a fonte e valide.
O que fazer depois?
Revise diff e rode linter, build, acessibilidade e testes de navegador.