Formatador e minificador CSS

Formate a folha de estilos com um seletor por linha ou minifique removendo os espaços e os comentários que o navegador ignora. As duas ações são reescritas de texto nesta página: nada é enviado, e textos entre aspas, conteúdo de url() e propriedades personalizadas voltam intactos.

Funciona localmente no seu navegador

Como formatar ou minificar uma folha de estilos

Cole a folha de estilos e clique em Formatar para obter um seletor por linha com recuo de tabulação, ou em Minificar para remover os espaços e os comentários que o navegador ignora de qualquer forma. As duas ações reescrevem texto dentro desta página: o CSS não é enviado a lugar nenhum e não há nada para instalar nem conta para criar.

A reescrita é propositalmente conservadora. Os valores são mantidos como estão escritos —textos entre aspas, o conteúdo de url() como os URI data:, seletores de atributo, sequências de escape e propriedades personalizadas nunca são reformatados— e nada é acrescentado: nem ponto e vírgula que faltem, nem prefixos de navegador, nem regras unidas. O que volta é a sua própria folha de estilos, com outra disposição.

  1. Cole o CSS no campo do topo ou digite por cima do texto de exemplo.
  2. Ajuste as três opções abaixo do campo: Remover comentários apaga os blocos /* … */, Propriedades em minúsculas já vem marcada e afeta apenas os nomes das propriedades, e Disposição horizontal coloca cada regra em uma linha e vale só para Formatar.
  3. Clique em Formatar para ler a folha ou em Minificar para reduzi-la antes de publicar; o resultado aparece abaixo, no quadro de saída e com cores de sintaxe.
  4. Copiar leva o texto exato da saída e Limpar esvazia a entrada, a saída e o próprio quadro de saída.

O que a saída preserva e o que ela reescreve

Como o Formatar organiza a folha de estilos

Formatar escreve um seletor por linha, recua cada nível de aninhamento com uma tabulação e coloca cada declaração na própria linha dentro de seletor { … }. Listas de seletores mantêm as vírgulas, regras @ como @media e @supports mantêm os blocos e uma regra vazia continua vazia. Uma declaração escrita sem ponto e vírgula continua sem ele, e vários pontos e vírgula seguidos viram um só.

É uma passada de espaços, não de estilo: linhas longas não são quebradas por coluna, declarações e regras não são reordenadas, declarações repetidas e atalhos não são unidos, e prefixos de navegador não são acrescentados. Uma folha recuada com oito espaços e outra quebrada à mão saem com o mesmo recuo de tabulação.

Quando o Minificar mantém um espaço

Minificar reduz cada sequência de espaços a um único espaço onde o CSS precisa dele e a remove onde não precisa: .a > .b vira .a>.b e red !important vira red!important, enquanto calc(100% - 20px), 1px solid #000 e a lista de valores de rgba(0, 0, 0, .5) mantêm os espaços e as vírgulas que têm significado. Tabulamentos e quebras de linha desaparecem em todo o arquivo, exceto dentro de textos entre aspas e de url().

A economia vem apenas de espaço em branco, comentários e pontos e vírgula repetidos. Um arquivo já minificado quase não muda: a folha do Bootstrap 3.3.7, de 121 KB, perde aqui 333 bytes porque não sobrou nada para retirar. Um arquivo recuado à mão e com faixas de comentário ganha alguns pontos percentuais a mais. Renomear classes, unir regras e remover seletores sem uso não fazem parte desta ferramenta.

O que cada uma das três opções faz

Remover comentários vem desmarcada. Marcada, os blocos /* … */ são apagados antes do resto do trabalho, incluindo os avisos de licença /*! … */, o único caso em que o Minificar altera um arquivo que uma licença espera manter. Propriedades em minúsculas já vem marcada e mexe apenas nos nomes das propriedades: COLOR:RED vira color:RED. Os valores mantêm a grafia, então url(X.PNG) não é tocado, e os nomes das regras @ também ficam como estão.

As propriedades personalizadas ficam de fora dessa conversão de propósito. --MainColor e var(--MainColor) nomeiam a mesma variável só enquanto a grafia coincide, de modo que reescrever a definição como --maincolor quebraria todas as referências. Disposição horizontal junta a saída formatada para que cada regra ocupe uma única linha, com quebra depois da chave de fechamento; o Minificar ignora esse ajuste.

Onde a ferramenta para

Não há um analisador de CSS por trás dos dois botões, então nada é validado nem corrigido. Uma chave de fechamento ausente volta como foi digitada, uma chave a mais é mantida e texto que não é CSS —HTML, JavaScript, prosa— retorna sem alteração. Uma folha que o navegador já aceita é aceita aqui do mesmo jeito; uma quebrada volta quebrada, no mesmo ponto.

Nada é enviado: a ferramenta inteira é um script que chega com a página, então não há requisição enquanto você trabalha e ela continua funcionando sem conexão. O limite prático é o tamanho: uma folha de 1,2 MB é reescrita em cerca de 130 ms, mas colorir o resultado na tela custa por volta de 1,7 s, e é isso que você espera.

Ferramentas recentes: