Embeleze CSS minificado em regras legíveis, uma declaração por linha, sem alterar o que o CSS faz. Usa o mesmo formatador do CSS Formatter.
O que ela faz
O CSS Beautifier transforma CSS minificado em um código que dá para ler. Uma folha de estilos espremida em uma única linha, como sai de uma etapa de build ou aparece na aba Rede (Network) de um navegador, vira um bloco por regra, uma declaração por linha e uma indentação que acompanha o aninhamento, e você consegue percorrê-la, pesquisá-la e revisá-la.
Ele funciona exatamente como o CSS Formatter, com o mesmo motor e as mesmas regras. A ferramenta muda a forma como o CSS é escrito, não o que ele seleciona nem o que define. Use esta página quando o problema for um CSS difícil de ler, e o CSS Formatter quando ele já for legível e você quiser um estilo consistente.
O que ela aceita
- CSS minificado, CSS em uma única linha e CSS com indentação irregular. Apenas CSS padrão, incluindo at-rules como @media, @font-face, @keyframes, @layer e @page, e o aninhamento nativo do CSS que os navegadores suportam.
- O layout é refeito do zero, e algumas grafias ficam uniformes: cores hexadecimais e nomes de propriedades em minúsculas, aspas simples trocadas por aspas duplas, o espaçamento dentro dos valores e um ponto e vírgula depois da última declaração de um bloco. Um valor com várias partes separadas por vírgula, como uma lista de transições, pode ficar com uma parte por linha.
- Os números são reescritos, então o resultado pode não coincidir dígito a dígito com a sua entrada: 0.50px vira 0.5px, 10.0 vira 10, .5 vira 0.5 e 1E3 vira 1e3. O valor continua o mesmo; só muda a forma de escrevê-lo.
- Os nomes de classes e de elementos nos seletores mantêm a caixa que você escreveu. Os comentários são mantidos.
- O valor de uma propriedade personalizada (um nome que começa com --) é mantido exatamente como foi escrito, exceto pelos espaços ao redor.
- Nada é buscado: @import e url() são apenas texto, e a ferramenta nunca carrega uma folha de estilos nem uma imagem.
- As propriedades e os valores não são conferidos com as especificações do CSS. Uma declaração como foo: bar é formatada como qualquer outra.
Bom saber
- Embelezar muda o aspecto do CSS, não o que ele faz. Não há ação de minificar CSS aqui: esta ferramenta vai do compacto ao legível.
- O CSS gerado a partir de Sass, SCSS ou Less já é CSS comum e funciona aqui. Os arquivos-fonte nessas linguagens, não: uma $variavel, @mixin, @include, um comentário // ou #{interpolacao} é recusado, e uma chamada de mixin do Less como .rounded(); também. Nada é compilado nem convertido, e algum código Less que parece CSS comum é formatado como tal.
- O CSS nunca é reparado. Um bloco, uma string, um comentário, um parêntese ou um colchete sem fechamento, e um }, ) ou ] sobrando, são recusados com a sua linha e coluna. Para escrever um ) ou ] literal dentro de um nome ou de um endereço, escape-o como \) ou \]. Parênteses ou colchetes aninhados em mais de 64 níveis também são recusados.
- Um url() sem aspas não pode conter espaço, aspas nem parêntese de abertura. Coloque o endereço entre aspas, como em url("nome do arquivo.png").
- Uma entrada feita só de linhas em branco não tem o que embelezar e recebe um aviso pedindo conteúdo. Um texto que contém apenas um comentário é formatado.
- O CSS minificado fica maior ao ser formatado, porque cada declaração ganha a sua linha e a sua indentação. Um arquivo minificado muito grande pode passar do limite de tamanho do resultado, ou demorar o bastante para chegar ao limite de tempo, antes de chegar ao limite de tamanho da entrada. Se a indentação deixasse o resultado muito maior que o limite de tamanho, a ferramenta para antes de formatar: use 2 espaços ou menos aninhamento.
Como usar
- Cole na caixa de entrada o CSS minificado de uma saída de build ou da aba Rede (Network) do navegador. Nada é executado enquanto você digita.
- Escolha “2 espaços” ou “4 espaços”. Nesta página o botão de ação se chama “Formatar”, como no CSS Formatter, porque as duas ferramentas usam o mesmo motor.
- Aperte “Formatar” e leia o resultado ao lado da entrada. Se o CSS não puder ser formatado, a mensagem explica o motivo e, quando possível, o lugar.
- Aperte “Copiar” para levar a versão legível com você, ou “Baixar” para salvá-la como formatted.css.
Exemplos
Embelezar uma folha de estilos de uma linha
Cole o CSS abaixo e aperte “Formatar” com “2 espaços” selecionado. Cada regra ganha o seu bloco e cada declaração a sua linha. A grafia também fica uniforme: 1.0em vira 1em, #DDD vira #ddd, .2 vira 0.2 e as vírgulas dentro de rgba() ganham um espaço depois.
.card{display:flex;padding:0.75em 1.0em;border:1px solid #DDD}.card:hover{box-shadow:0 2px 4px rgba(0,0,0,.2)}.card {
display: flex;
padding: 0.75em 1em;
border: 1px solid #ddd;
}
.card:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
Uma cópia que foi cortada
Falta a última chave de fechamento, como quando uma cópia para no meio. A ferramenta não adivinha onde a regra deveria terminar, então recusa e aponta o bloco que nunca foi fechado.
.card{padding:1em;color:redEste bloco nunca é fechado. Adicione a chave de fechamento correspondente (}).
Linha 1, coluna 1
Listas de seletores e media queries
Seletores e condições minificados também são espalhados. Cada seletor de uma lista separada por vírgulas vai para a sua própria linha, os combinadores > e + ganham um espaço de cada lado e a media query recupera o seu espaçamento.
h1,h2,h3{margin:0 0 .5em}.nav>li+li{margin-left:1em}@media (min-width:600px) and (max-width:900px){.nav{display:none}}h1,
h2,
h3 {
margin: 0 0 0.5em;
}
.nav > li + li {
margin-left: 1em;
}
@media (min-width: 600px) and (max-width: 900px) {
.nav {
display: none;
}
}
Variáveis Sass
Um nome que começa com $ é uma variável Sass, que não é CSS. A ferramenta formata apenas CSS padrão e nunca compila nem converte nada, então recusa e aponta o primeiro marcador que encontrou.
$brand: #333;
.btn{color:$brand}Isto parece sintaxe de Sass, SCSS ou Less, como uma $variável, um @mixin ou @include, um @variavel: valor, um comentário // de linha ou uma #{interpolação}, que esta ferramenta não suporta. Ela formata apenas CSS padrão e nunca compila nem converte nada.
Linha 1, coluna 1
Limites e privacidade
Limites de tamanho
- Entrada: até 2.000.000 bytes de texto em UTF-8 (cerca de 2 MB). Letras acentuadas e emojis ocupam mais de um byte cada. Uma entrada maior é recusada.
- Resultado: também até 2.000.000 bytes. Se o resultado completo fosse maior, a ferramenta mostra apenas uma prévia incompleta dos primeiros 100.000 bytes, e essa prévia não pode ser copiada nem baixada.
- Aninhamento: até 256 níveis de chaves, parênteses e colchetes abertos contados em conjunto dentro uns dos outros. Um CSS mais profundo é recusado porque passa do que a ferramenta processa.
- Parênteses e colchetes: um limite independente de 64 aberturas contadas em conjunto, dentro do limite de aninhamento combinado acima. Um CSS mais profundo é recusado porque passa do que a ferramenta processa.
- Tempo: uma execução que demora mais que o seu limite de tempo é interrompida. Tente uma entrada menor.
Sua privacidade
O texto que você digita ou cola, ou abre de um arquivo local, é processado localmente no seu navegador, em um Web Worker dedicado. Ele nunca é enviado para o servidor (um arquivo que você abre é lido apenas no seu navegador) e não é gravado em armazenamento, cookies nem na barra de endereços.
“Copiar” coloca o resultado na área de transferência e “Baixar” o salva como arquivo, mas só quando você aperta o botão. O arquivo é criado no seu navegador, então nada é enviado.
Para ver os detalhes completos, consulte a Política de Privacidade
Ferramentas e páginas relacionadas
O seu texto continua na página quando você troca de ferramenta na mesma aba, então dá para testar o mesmo texto em outra. Recarregar ou fechar a aba o encerra.