Formate o CSS que você mantém com um estilo consistente: a mesma indentação, espaçamento e grafia em todo lugar. Usa o mesmo formatador do CSS Beautifier.
O que ela faz
O CSS Formatter dá um estilo consistente ao CSS escrito à mão: a mesma indentação, uma declaração por linha, espaçamento uniforme em volta de dois-pontos, vírgulas e chaves, e a mesma grafia para números, cores e aspas. Use-o antes de uma revisão ou de um commit, para que o diff mostre o que você mudou e não como as linhas por acaso estavam dispostas.
O CSS Beautifier usa este mesmo formatador, então a mesma entrada dá o mesmo resultado nas duas páginas. Esta página é para o CSS que você mantém: o que cada regra seleciona e define não muda, os seus comentários e a ordem das suas regras ficam, e nada é reparado, renomeado nem ordenado.
O que ela aceita
- CSS padrão, incluindo at-rules como @media, @font-face, @keyframes, @layer e @page, e o aninhamento nativo do CSS que os navegadores suportam. Os comentários são mantidos.
- Indentação de 2 ou 4 espaços, nunca tabulações. As quebras de linha do resultado são sempre do mesmo tipo, qualquer que seja o do seu texto.
- O que fica uniforme: nomes de propriedades e cores hexadecimais em minúsculas, aspas duplas no lugar de aspas simples, espaçamento uniforme depois de dois-pontos e de vírgulas e um ponto e vírgula depois da última declaração de cada 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 escritos em uma só grafia, então um número pode parecer diferente depois: 0.50px vira 0.5px, 10.0 vira 10, .5 vira 0.5 e 1E3 vira 1e3. O seu valor não muda.
- Os nomes ficam como você os escreveu: os nomes de classes e de elementos nos seletores mantêm a caixa, e o mesmo vale para os nomes e os valores das propriedades personalizadas.
- Uma sequência de linhas em branco vira uma única linha em branco, e as linhas em branco que você mantém continuam onde estão.
- Nada é buscado: @import e url() continuam como texto. As propriedades e os valores não são conferidos com as especificações do CSS, então uma propriedade inventada é formatada como uma de verdade.
Bom saber
- Estes casos são recusados, sem resultado: um bloco, uma string, um comentário, um parêntese ou um colchete sem fechamento; um }, ) ou ] sobrando; e um url() sem aspas que contenha espaço ou aspas. A mensagem informa a linha e a coluna, e nada é reparado. Um ) ou ] literal dentro de um nome ou de um endereço precisa ser escrito como \) ou \]. Parênteses ou colchetes aninhados em mais de 64 níveis também são recusados.
- Sass, SCSS e Less não são suportados. Uma $variavel, @mixin, @include, uma @variavel: valor do Less, um comentário // ou #{interpolacao} é recusado, e uma chamada de mixin do Less como .rounded(); é recusada como erro de sintaxe. A ferramenta nunca compila nem converte nada, e não detecta todas as construções do Less: algumas parecem CSS comum e são formatadas como tal.
- Um texto com apenas um comentário é formatado. Um texto com apenas linhas em branco não tem o que formatar, então você recebe um aviso pedindo conteúdo.
- Arquivos grandes podem demorar para formatar, e o CSS minificado fica maior ao ser formatado. Se uma execução for interrompida no limite de tempo, ou se o resultado passasse do limite de tamanho, tente uma entrada menor.
- 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 ou digite o seu CSS na caixa de entrada. Nada é executado enquanto você digita.
- Escolha a indentação que o seu projeto usa, “2 espaços” ou “4 espaços”, e aperte “Formatar”.
- Compare o resultado com a sua entrada. Uma regra que não pode ser lida como CSS padrão é recusada com a sua linha e coluna, para que você a corrija e execute a ferramenta de novo.
- Aperte “Copiar” para colar o CSS formatado no seu projeto, ou “Baixar” para salvá-lo como formatted.css.
Exemplos
Levar um arquivo escrito à mão a um só estilo
Cole o CSS abaixo e aperte “Formatar” com “2 espaços” selecionado. A indentação irregular e os espaços sobrando somem, COLOR vira color, as cores hexadecimais ficam em minúsculas, .5em 1.50em vira 0.5em 1.5em, as aspas simples viram aspas duplas e o ponto e vírgula que faltava depois da última declaração é acrescentado. O nome de classe .btn mantém a sua caixa, e a sequência de linhas em branco dentro da primeira regra vira uma única linha em branco.
.btn {
COLOR:#FFF;
background : #0A66C2;
padding:.5em 1.50em;
font-family: 'Inter', sans-serif
}
.btn:hover{background:#084E96}
.btn {
color: #fff;
background: #0a66c2;
padding: 0.5em 1.5em;
font-family: "Inter", sans-serif;
}
.btn:hover {
background: #084e96;
}
Um parêntese de fechamento sobrando
Há um parêntese a mais no fim do calc(). A ferramenta não adivinha qual deles era o certo, então recusa e aponta o que está sobrando.
.a{width:calc(100% - 2rem));}Este parêntese de fechamento ()) não tem o parêntese de abertura correspondente. Remova-o ou adicione o parêntese de abertura a que ele pertence. Para escrever um parêntese literal em um nome ou endereço, use o escape \).
Linha 1, coluna 27
Propriedades personalizadas ficam como foram escritas
O valor de uma propriedade personalizada (um nome que começa com --) significa o que o código que o lê decidir, então a ferramenta não o reescreve: #FFF e 1.50rem ficam como foram escritos, exceto pelos espaços ao redor. Fora de uma propriedade personalizada, 1.0em vira 1em.
:root{--Brand-Color:#FFF;--Gap: 1.50rem }
.btn{color:var(--Brand-Color);padding:var(--Gap) 1.0em}:root {
--Brand-Color: #FFF;
--Gap: 1.50rem;
}
.btn {
color: var(--Brand-Color);
padding: var(--Gap) 1em;
}
Uma chamada de mixin do Less
Uma chamada de mixin é Less, não CSS: para o CSS ela parece uma declaração sem dois-pontos. O Less não é suportado, então a ferramenta recusa e aponta a linha em que deixou de entender.
.btn{
.rounded();
color:red
}O CSS não é válido neste ponto. Por exemplo: uma declaração sem dois-pontos, uma regra sem seletor ou um texto que não é CSS. O CSS nunca é corrigido automaticamente, então corrija-o e execute a ação novamente. Esta ferramenta formata apenas CSS padrão, então a sintaxe de Sass, SCSS e Less também pode causar isso.
Linha 2, coluna 3
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.