Formatador CSS
Indente uma folha de estilos para poder lê-la, inteiramente no seu navegador. Nada é renomeado, encurtado ou normalizado.
Roda inteiramente no seu navegador. Nada é enviado, registrado ou armazenado.
Cole uma folha de estilos minificada ou mal indentada e leia-a direito. A formatação acontece no seu navegador, e nada na folha muda além do espaçamento.
Como funciona
A folha é dividida em pedaços — comentários, strings, endereços, nomes, números, chaves — e depois reescrita. Cada regra ganha o próprio bloco, cada seletor de uma lista ganha a própria linha, e cada declaração ganha a própria linha dentro da regra. Regras aninhadas, media queries e keyframes aninham junto.
O espaço em branco é mantido a menos que comprovadamente não signifique nada. Isso é o oposto do que a maioria dos formatadores faz, e é deliberado: em CSS um espaço entre dois seletores é o combinador de descendente, então ".a .b" e ".a.b" casam com elementos diferentes. O espaço só é removido antes de uma vírgula, um ponto e vírgula ou um fechamento de chave, e depois de uma abertura, onde o CSS não pode lê-lo como nada.
O único espaço que é acrescentado é o de depois dos dois-pontos de uma declaração. Distinguir esses dois-pontos dos de uma pseudoclasse é o motivo de o formatador olhar adiante, até a próxima chave ou ponto e vírgula, antes de decidir o que está lendo.
Exemplos
| Caso | Entrada | Resultado |
|---|---|---|
| Uma regra escrita em uma linha | a{color:red;margin:0} | a { color: red; margin: 0; } |
Perguntas frequentes
A minha folha de estilos é enviada para algum lugar?
Não. O formatador é JavaScript rodando nesta página. Nada é enviado, nada é registrado e nada é armazenado — você pode desligar a sua conexão de rede e a ferramenta continua funcionando.
Ele também minifica?
Não, e isso é uma decisão, não uma omissão. Minificar CSS significa decidir qual espaço em branco carrega significado e qual não carrega, e errar isso muda quais elementos uma regra casa — em silêncio, de um jeito que você só descobriria em produção. Esse é outro trabalho, e ele merece ser feito direito ou não ser feito.
Ele conserta ou arruma os meus valores?
Não. Ele não vai passar uma cor hexadecimal para minúsculas, encurtar #ffffff, tirar um zero à esquerda, reordenar as suas declarações nem acrescentar prefixos de fabricante. Cada uma dessas coisas é uma opinião sobre o seu código, e não uma questão de layout, e algumas delas mudam o comportamento. Só o espaço em branco se move.
Ele entende Sass ou Less?
Em parte, e com honestidade: ele diagrama regras aninhadas, que é a parte que essas linguagens têm em comum com o CSS moderno. Ele não faz ideia do que é um mixin, uma variável ou uma diretiva de controle, então trata tudo como os tokens que são. Nada se perde, mas não espere que ele saiba que @if abre um ramo.
O que acontece com um data URI?
Ele sobrevive. Um url() sem aspas é lido como um pedaço único até o fechamento do parêntese, porque um data URI rotineiramente contém um ponto e vírgula, e ler isso como fim de declaração cortaria o valor ao meio.
Bom saber
- A saída contém exatamente os pedaços que a entrada continha. A única adição é um ponto e vírgula na última declaração de um bloco, que é seguro em qualquer lugar e mantém o resultado estável quando a regra ganhar outra linha depois.
- Uma string, um comentário ou um url() não terminados são recusados em vez de reformatados, porque a partir dali a ferramenta não consegue mais distinguir código de texto.
- O layout é determinístico: a mesma folha com a mesma opção sempre produz a mesma saída, e formatar uma folha já formatada não muda nada.
Todas as ferramentas de Código