Formatação de código / MULTIVERTO
Indente uma folha de estilos CSS para revelar regras e declarações.
Aplique cada ferramenta de texto ao resultado anterior. Fluxos de trabalho com texto ↗
Somente o nome da sequência e a ordem das ferramentas são salvos neste navegador. Sua entrada e seus resultados nunca são salvos.
01 / Exemplo
h1{color:#334155;margin:0;}p{line-height:1.5;}h1 {
color:#334155;
margin:0;
}
p {
line-height:1.5;
}02 / Guia
Indentar uma folha de estilo CSS para revelar regras e declarações. Indentamento e quebras de linha expõem estrutura enquanto preservam os tokens de entrada suportados. Use isso em uma folha de estilo curta cujos seletores e declarações foram comprimidos juntos. O resultado coloca cada regra e declaração em sua própria linha. Ele não classifica propriedades ou decide se um seletor é usado; essas são tarefas diferentes.
CSS consiste em seletores, at-rules, blocos de declaração, valores e comentários. Um espaço entre seletores pode expressar uma relação descendente, então remover cada espaço mudaria quais elementos recebem uma regra. Cadeias de caracteres, funções como calc(), propriedades personalizadas e URLs incorporadas também podem conter pontuação que se assemelha a um delimitador. Este formatador verifica strings, comentários e aninhamentos antes de alterar o layout; ele não avalia a cascata, extensões de fornecedor ou suporte de navegador.
A formatação é mais útil durante a revisão ou depuração, quando o recuo pode expor um nível de aninhamento ausente ou um irmão inesperado. Cole um fragmento completo e representativo e execute o formatador uma vez. Leia a saída da estrutura mais externa para dentro, prestando atenção em onde cada elemento, bloco ou cláusula começa e termina. Esta página deliberadamente evita fingir ser um compilador para todas as possíveis extensões da linguagem. No exemplo, “h1{color:#334155;margin:0;}p{line-height:1.5;}” produz a prévia compacta “h1 { ⏎ color:#334155; ⏎ margin:0; ⏎ } ⏎ p { ⏎ line-height:1.5; ⏎ }” (⏎ indica uma quebra de linha). Leia a pontuação, bem como as palavras visíveis: essa pequena amostra é um resultado observável desta operação em particular. Altere um recurso que você gosta na fonte e compare o mesmo lugar no resultado. Para uma revisão CSS, coloque uma regra dentro de @media e outra depois. As chaves exibidas em linhas separadas devem deixar claros os respectivos escopos. Compare as folhas originais e formatadas em uma página onde ambos os seletores correspondem, porque uma chave de fechamento mal colocada pode alterar qual declaração vence.
Use isso quando uma folha de estilo compacta torna o escopo de uma regra de mídia ou seletor difícil de inspecionar. Siga as chaves e declarações no resultado expandido e, em seguida, compare um seletor que depende de um espaço descendente. Um formatador não informa se uma propriedade é suportada por um navegador ou se a cascata seleciona o elemento pretendido. Mantenha o original ao lado da saída e teste um pequeno exemplo conhecido antes de manipular um documento grande. Compare conteúdo significativo, não apenas o tamanho do arquivo ou o número de linhas. Verifique nomes, strings entre aspas, caracteres não ASCII, terminações de linha e quaisquer campos repetidos após a transformação.
Explorar guias