Formatador CSS
Uma declaração por linha — ou o arquivo inteiro em uma.
Os exemplos substituem temporariamente os dados e as configurações. Você pode restaurar seu trabalho anterior.
0 caracteres
Resultado
Cole ou digite acima para ver o resultado aqui.
Seus arquivos ficam no seu dispositivo
Esta ferramenta roda inteiramente no seu navegador. O que você cola é processado no seu dispositivo e nunca é enviado a um servidor, então é seguro usar com tokens, chaves e textos não publicados.
Exemplo
Exemplo prático — Formatador CSS
Insira as linhas na ordem e use as configurações abaixo. Compare o resultado com as linhas de saída.
| Item | Valor |
|---|---|
| Entrada 1 | a{color:red;margin:0} |
| O que fazer | Diagramar |
| Recuo | 2 espaços |
| Saída 1 | a { |
| Saída 2 | color: red; |
| Saída 3 | margin: 0; |
| Saída 4 | } |
As duas declarações CSS ficam em linhas separadas com recuo de dois espaços. Os valores red e 0 não mudam.
Como funciona
- Cole o CSS.
- Ao diagramar, cada seletor e cada declaração ficam na própria linha, com uma linha em branco entre as regras.
- Ao comprimir somem os comentários e todo espaço que não faz nada.
- Copie ou baixe o resultado.
Perguntas frequentes
- E uma chave dentro de uma string ou de um url()?
- Fica intocada. Strings e comentários são lidos como peças inteiras antes de qualquer corte nas chaves, então content: "}" é formatado direito em vez de partir a regra ao meio.
- A minificação mantém o espaço em .a .b?
- Mantém. Esse espaço é o combinador de descendência e significa algo; os espaços em volta de dois-pontos ou de uma chave, não. Só somem os que não significam nada.
- Ele reordena ou encurta minhas propriedades?
- Não. Nada é fundido, encurtado ou movido — #ffffff continua #ffffff. Isto diagrama o que você escreveu; não reescreve.
- Alguma coisa é enviada para um servidor?
- Não. Roda no navegador, então o que você colar fica no seu computador.