CSS Beautifier Grátis
Este formatador CSS grátis transforma folhas de estilo minificadas ou desorganizadas em código legível com uma declaração por linha, um espaço após cada dois-pontos e regras indentadas. Blocos aninhados como media queries são indentados um nível a mais. Comentários, strings e valores url() são mantidos exatamente como escritos. É ideal para desenvolvedores que precisam ler ou editar uma folha de estilo recebida minificada.
CSS Beautifier
Generators and Converters
Sobre esta ferramenta
CSS minificado é escrito para navegadores, não para pessoas: cada regra fica em uma linha e encontrar uma cor ou margem significa varrer milhares de caracteres. Formatar restaura o layout que torna uma folha de estilo fácil de revisar.
A ferramenta lê a folha de estilo um caractere por vez, então pontos-e-vírgulas dentro de endereços de dados url() e chaves dentro de strings não a confundem. Cada seletor inicia um novo bloco, cada declaração recebe sua própria linha com um único espaço após os dois-pontos, e regras dentro de blocos media ou supports são indentadas um nível mais profundo. Comentários permanecem onde estavam. Você pode escolher dois espaços, quatro espaços ou tabulações.
Formatar não muda o que o CSS faz e não corrige erros: uma chave ausente aparece como indentação que nunca retorna. Combine com o minificador CSS quando quiser comprimir o arquivo novamente antes de publicar. Nada que você cola é armazenado.
Perguntas frequentes
Formatar muda como meu CSS funciona?
Não. Apenas o espaço em branco entre regras e declarações muda, então o navegador lê exatamente as mesmas instruções. Strings, comentários e valores url() são copiados sem alterações, o que também protege imagens de dados inline.
Pode formatar SCSS ou LESS?
CSS simples é o alvo. Blocos SCSS e LESS aninhados simples geralmente serão indentados corretamente porque as chaves são tratadas da mesma forma, mas recursos como mixins com sintaxe incomum não são compreendidos, então verifique o resultado antes de confiar nele.
Por que uma chave de fechamento não retorna para a esquerda?
O formatador segue suas chaves exatamente. Se uma regra está faltando uma chave de fechamento, a indentação permanece profunda até o final do arquivo. Essa é uma forma rápida de encontrar a regra quebrada, mas você precisa adicionar a chave ausente você mesmo.
Como faço para deixá-lo pequeno novamente?
Mantenha a versão formatada enquanto trabalha, depois execute-a através do minificador CSS antes de publicar. O minificador remove os comentários e espaços em branco novamente, então você obtém código-fonte legível para edição e um arquivo compacto para visitantes.