O formatador usa um analisador que entende a sintaxe, em vez de simplesmente dividir o texto em chaves e pontos e vírgulas. Ele acompanha strings, comentários, funções, seletores de atributos e blocos aninhados. Assim, a pontuação dentro de uma URL ou de um valor entre aspas permanece intacta.
Formatar CSS online
Funciona inteiramente no seu navegador - sem upload, sem cadastro.
Como formatar CSS online?
Um formatador de CSS transforma folhas de estilo minificadas ou com espaçamento irregular em código legível, com indentação e quebras de linha consistentes. Cole o CSS, escolha dois espaços, quatro espaços ou tabulação e copie ou baixe o resultado. Tudo roda no navegador e preserva comentários, valores entre aspas, URLs de dados e a ordem das declarações.
Como usar
- 1Cole o CSS. Adicione ao editor uma folha de estilo, um bloco de seletores ou um trecho de CSS minificado.
- 2Escolha a indentação. Selecione dois espaços, quatro espaços ou tabulação. O resultado é atualizado enquanto você digita.
- 3Confira o status. Veja as contagens estruturais ou corrija o delimitador sem par, o comentário aberto ou a string sem fechamento indicada.
- 4Copie ou baixe. Copie o CSS formatado para a área de transferência ou salve o arquivo como formatted.css.
Para quem é
- Desenvolvedores front-end que expandem CSS de produção para facilitar a leitura e a depuração.
- Revisores de código que padronizam a indentação antes de comparar uma folha copiada ou um trecho de pull request.
- Estudantes que querem visualizar melhor media queries, seletores e blocos de declarações aninhados.
- Equipes de suporte e QA que limpam o CSS copiado do inspetor antes de colocá-lo em um chamado ou exemplo de erro.
Perguntas frequentes
O formatador de CSS é grátis?
Sim. Você pode formatar quanto CSS o navegador conseguir processar com conforto. Não é preciso criar conta nem instalar nada, não há cota de uso e o resultado fica disponível na hora.
Meu CSS é enviado para um servidor?
Não. A formatação acontece localmente no navegador. O CSS colado fica no editor da página e não é enviado a nenhuma API, o que também permite trabalhar com estilos de projetos privados.
Quanto CSS posso formatar?
A ferramenta não impõe limite de caracteres. Folhas geradas muito grandes ainda dependem da memória e do desempenho do dispositivo, mas estilos comuns de sites, componentes e e-mails são formatados imediatamente.
A formatação muda o funcionamento do CSS?
Ela altera espaços e quebras de linha, mas mantém seletores, declarações, comentários, strings entre aspas e a ordem original. Revise o código antes de publicar, principalmente se a folha usar sintaxe experimental ou escapes que dependam de espaços incomuns.
A ferramenta valida propriedades CSS?
Não. Ela confere o equilíbrio de chaves, colchetes, parênteses, comentários e strings. Não verifica se cada propriedade, valor ou recurso específico de navegador é válido. Para isso, use um validador CSS baseado nos padrões.
É possível formatar media queries e CSS aninhado?
Sim. Blocos dentro de regras @media, @supports, @container, @layer e @keyframes recebem indentação de acordo com a profundidade. Seletores aninhados modernos também são organizados sem alterar strings nem argumentos de funções.