Como usar
- Cole o CSS na caixa de entrada, abra um arquivo .css ou experimente o exemplo.
- Escolha Formatar para código legível ou Minificar para a menor saída.
- Ao formatar, escolha 2 espaços, 4 espaços ou tabulações.
- Copie o resultado ou baixe-o como um arquivo .css. Se houver chaves ou aspas desbalanceadas, o erro mostra a linha e a coluna.
Como funciona
O formatador primeiro divide a folha de estilos em tokens: strings com aspas simples ou duplas, valores url(…), comentários, chaves e ponto e vírgula. Como strings e url() são tokens únicos, um ponto e vírgula dentro de um data URI ou uma chave dentro de content: "{ }" nunca confunde a estrutura, e o conteúdo deles é copiado exatamente.
O Beautify coloca cada seletor de uma lista de seletores em sua própria linha, adiciona espaços ao redor dos combinadores filho, irmão e adjacente (>, ~, +) e escreve cada declaração como “propriedade: valor;” em sua própria linha. Blocos dentro de @media, @supports, @layer, @container e do aninhamento nativo do CSS são indentados em um nível por profundidade. Um ponto e vírgula ausente após a última declaração de um bloco é adicionado. Os comentários são mantidos onde estão.
O Minify remove comentários (exceto avisos de licença /*! … */), condensa espaços em branco, remove espaços ao redor de chaves, dois-pontos, ponto e vírgula, vírgulas e combinadores de seletores, e elimina o ponto e vírgula antes de cada chave de fechamento. Espaços que alteram o significado são mantidos: o combinador descendente em “.a .b”, o espaço em “a :focus” e os espaços dentro de valores como calc(100% - 2px). “! important” é normalizado para “!important”.
A ferramenta não reescreve valores: cores, unidades e zeros são mantidos como escritos, e as regras não são mescladas nem reordenadas. Arquivos SCSS ou Less com aninhamento simples geralmente funcionam, mas a sintaxe própria deles, como comentários de linha // ou mixins, não é compreendida.
Exemplos
Lendo um arquivo de framework minificado
Cole um trecho de bootstrap.min.css de uma linha e escolha Beautify com 2 espaços para ver cada regra, as media queries e suas regras aninhadas em linhas separadas e indentadas.
Publicando uma folha de estilos escrita à mão
Minifique uma folha de estilos de 12 KB com comentários e indentação antes de adicioná-la inline a um template de e-mail ou ao head de uma página. O resumo mostra a contagem de caracteres antes e depois.
Encontrando uma chave ausente
Uma folha de estilos para de ser aplicada no meio. O formatador informa “Este { nunca é fechado com um } correspondente” com a linha da regra que está sem a chave de fechamento.
Perguntas frequentes
O CSS minificado por esta ferramenta é seguro para usar em produção?
Ele remove apenas comentários e espaços em branco que o CSS ignora, então as regras se comportam da mesma forma. Ele não faz as otimizações mais profundas de ferramentas de build, como mesclar regras ou abreviar cores, então o resultado pode ficar um pouco maior que o delas.
Por que um espaço é mantido em “a :focus”?
Em um seletor, um espaço é o combinador descendente. “a :focus” significa um elemento focado dentro de um link, enquanto “a:focus” significa um link focado. Remover esse espaço mudaria quais elementos correspondem.
Ele consegue formatar SCSS ou Less?
Regras aninhadas simples são formatadas corretamente. Sintaxe exclusiva de pré-processadores, como comentários //, mixins com argumentos ou blocos @if, não é reconhecida e pode ser formatada de forma estranha, então verifique o resultado.
Comentários de licença são removidos ao minificar?
Comentários que começam com /*! são mantidos, o que é a convenção usual para avisos de licença e direitos autorais. Todos os outros comentários são removidos.
Privacidade
Seu CSS é processado apenas no seu navegador. Nada é enviado, armazenado ou incluído em análises.