Utilore

Formatador de CSS

Cole a folha de estilo — mesmo que ela tenha chegado em uma única linha — e leia de novo. Cada declaração ganha sua linha, blocos aninhados ganham recuo e os comentários ficam onde devem.

O código não sai desta página: a formatação acontece no seu navegador.

Como usar

  1. Cole o CSS no primeiro campo.
  2. Escolha o recuo: dois espaços, quatro ou tabulação.
  3. Copie o resultado, ou toque em «Minificar» para comprimir de novo.

Bom saber

Por que um formatador ingênuo quebra folhas de estilo

Cortar em cada ponto e vírgula e em cada chave parece funcionar até o arquivo trazer content: "a;b" ou uma data URI com um SVG dentro de url(). As duas coisas são comuns em CSS de verdade. Este formatador lê o arquivo caractere a caractere, então textos entre aspas e comentários atravessam inteiros em vez de serem cortados no primeiro sinal.

Um aninhamento que ajuda de fato

Media queries, blocos supports e regras aninhadas modernas somam um nível cada, e o recuo acompanha. Uma linha em branco separa as regras de primeiro nível, de modo que uma folha de duas mil linhas se lê como uma lista de blocos, não como um paredão de texto.

Perguntas frequentes

Meus comentários são preservados?

Sim. Um comentário isolado ocupa a própria linha; um comentário após uma declaração continua junto dela.

Ele altera meu CSS?

Nenhuma propriedade é renomeada, reordenada ou removida. Só os espaços se movem — a folha se comporta exatamente como antes.

Meu código vai para um servidor?

Não. Tudo roda no seu navegador, então a folha de um projeto sob sigilo fica no seu computador.

E SCSS ou LESS?

Regras aninhadas e comentários são formatados bem. Variáveis, mixins e diretivas de controle passam como estão, sem serem interpretados.

Ferramentas relacionadas