100 % local — seus dados nunca saem do seu navegador

Formatador CSS — leia uma folha minificada

Reindente CSS minificado ou bagunçado. Uma declaração por linha e os seus comentários intactos: uma folha que você não escreveu fica legível.

Instantâneo Privado Zero cookies
Indentação

Entrada CSS

Saída CSS

O que esta ferramenta faz

CSS minificado ou embaralhado vira CSS legível.

a{margin:0 auto;--x:1px}@media print{a{color:#000}}
a {
  margin: 0 auto;
  --x: 1px
}

@media print {
  a {
    color: #000
  }
}

Uma declaração por linha, um nível de indentação por nível de aninhamento, uma linha em branco entre as regras de primeiro nível. A indentação é uma opção: dois espaços por padrão, quatro se essa for a sua convenção.

O que ele deixa exatamente como está

  • Os seus valores. #FFFFFF não vira white, 0px não vira 0, e margin: 10px 10px 10px 10px não é dobrado. Essas reescritas são trabalho de um otimizador, e cada uma é um juízo sobre a sua folha de estilos.
  • A ordem. Declarações e regras saem na ordem em que você as escreveu. Em CSS a ordem é o sentido: com a mesma especificidade, vence a última regra.
  • Os seus comentários. Mantêm o lugar, acima da regra ou no fim da linha, pois foi para isso que foram escritos.

Não é um validador

a { color: red
a {
  color: red

A chave que falta volta faltando. Um formatador lê o que você dá e diagrama; ele não diz se um navegador aceitaria. Isso corta dos dois lados: uma folha com erro de sintaxe é arrumada mesmo assim, o que ajuda a achar o erro, e um resultado arrumado não prova nada sobre validade. Para isso, as ferramentas de desenvolvimento do navegador, ou um linter como o Stylelint.

O outro sentido

O minificador CSS deste site faz a viagem inversa: tira os espaços que esta ferramenta acrescenta, mantém intactas as strings, o conteúdo dos url() e os comentários de licença, e deixa os seus valores em paz do mesmo jeito. Formatar para ler, minificar para publicar — a mesma folha, duas formas.

Privado por padrão

Tudo é executado localmente no seu navegador com JavaScript. Os seus dados nunca são enviados para um servidor, o que torna a ferramenta segura para conteúdo sensível e funciona offline.

Perguntas frequentes

Ele verifica se o meu CSS é válido?
Não: é um formatador, não um validador, e a diferença importa quando algo está errado. `a { color: red` volta reindentado, com a chave que falta e tudo: a ferramenta diagrama o que lê, sem julgar. Um resultado limpo não é um certificado de que a folha de estilos é analisável; isso quem diz são as ferramentas de desenvolvimento do navegador ou um linter.
Meus valores ou cores são alterados?
Nunca. `#FFFFFF` continua `#FFFFFF`, `margin: 0px` mantém a unidade, e a ordem das suas declarações é a que você escreveu. A formatação mexe em espaços e quebras de linha — um otimizador que reescreve valores é outra ferramenta, com outros riscos.
E os comentários?
Ficam onde estavam. Um comentário acima de uma regra mantém o lugar acima daquela regra, que é exatamente para isso que ele foi escrito ali. Fazê-los sumir é trabalho do minificador, e é uma decisão à parte.

Conversores relacionados