Como formatar CSS com indentação consistente

Para que serve formatar CSS

O formatador de CSS ajuda a reorganizar folhas de estilo para facilitar a leitura ou reduzir o espaço ocupado pelo texto. Pode ser útil quando recebe CSS numa só linha, quando precisa de uma indentação consistente ou quando quer preparar o conteúdo para uma revisão rápida.

Introduza o CSS no campo de entrada e escolha o modo adequado ao objetivo. O modo de embelezamento organiza o código com quebras de linha e indentação consistente. O modo de minificação remove comentários de bloco, comprime espaços e elimina espaços à volta de chavetas, ponto e vírgula e dois-pontos.

Como formatar o CSS

1. Cole o CSS no campo de entrada. Se o conteúdo principal estiver vazio e for fornecido outro valor CSS compatível, esse valor alternativo pode ser usado. Um valor não textual, quando não é substituído por esse mecanismo, pode falhar na validação.

2. Selecione o modo de embelezamento para obter uma apresentação mais legível. Se preferir compactar o conteúdo, selecione o modo de minificação. Quando o modo não é definido, o processamento usa o embelezamento; a seleção de minificação depende do valor de modo reconhecido.

3. Defina a indentação, se essa opção estiver disponível. Para conteúdo não vazio, os valores aceites vão de 0 a 8. Um valor que não possa ser convertido ou que fique fora desse intervalo é substituído por 2.

4. Execute a formatação e consulte o resultado. Para CSS não vazio, o conteúdo não pode ultrapassar 1 000 000 bytes em UTF-8. Se introduzir apenas espaços em branco, o pedido devolve um resultado vazio antes das verificações de tamanho, indentação e modo.

Como interpretar o resultado

No modo de embelezamento, espere um resultado com declarações distribuídas por linhas e níveis de indentação consistentes. No modo de minificação, espere texto mais compacto, sem comentários de bloco e com menos espaços em posições específicas. O resultado vazio para uma entrada vazia ou composta apenas por espaços é um comportamento válido e inclui tamanhos de entrada e saída iguais a zero.

A formatação não deve ser confundida com uma verificação completa do CSS. Um resultado apresentado apenas mostra que o pedido foi processado nessas condições; não confirme, por si só, que o código está correto para o navegador ou que mantém equivalência semântica em todos os casos. Pedidos com tipos inválidos, conteúdo demasiado grande ou condições de processamento não disponíveis podem falhar.

Exemplo prático

Está a rever uma regra CSS compactada e quer torná-la mais legível antes de a editar.

Cole uma regra CSS escrita numa só linha, selecione o modo de embelezamento, mantenha a indentação em 2 e execute a formatação.

O resultado deverá apresentar o seletor e a declaração em linhas separadas, com indentação consistente no modo de embelezamento.

Limitações

• Pedidos com CSS não vazio podem falhar se excederem 1 000 000 bytes em UTF-8, se o valor não for textual ou se uma condição necessária ao processamento não estiver disponível.

Erros comuns

• Colar um valor que não é texto: a validação pode falhar se o valor principal não for textual. Cole o CSS como texto e confirme se um campo alternativo não está a substituir ou a deixar de substituir a entrada principal.

Perguntas frequentes

Posso formatar uma entrada CSS vazia?

Sim, desde que a entrada, depois de aplicado qualquer valor CSS alternativo, esteja vazia ou contenha apenas espaços. O resultado é vazio e os tamanhos de entrada e saída são zero.

É possível minificar CSS com esta ferramenta?

Sim, quando o modo selecionado é exatamente minify. Nesse caso, são removidos comentários de bloco, os espaços são comprimidos e são retirados espaços à volta de chavetas, ponto e vírgula e dois-pontos.

Que valor de indentação devo escolher?

Para conteúdo não vazio, escolha um valor entre 0 e 8. Valores que não possam ser convertidos ou que estejam fora desse intervalo passam a 2.