Formatador CSS

Um formatador CSS lê uma folha de estilo e a reescreve com espaçamento, recuo e quebras de linha consistentes para que seja fácil de ler e manter Ele analisa o CSS em sua estrutura subjacente de regras, seletores, declarações, regras de at e comentários e, em seguida, imprime essa estrutura de volta usando um layout previsível: uma declaração por linha, um único espaço após cada dois pontos e cada bloco aninhado recuado um nível mais profundo que seu pai As regras de estilo permanecem idênticas, mas um arquivo que chegou como uma linha longa e ininterrupta se torna algo que você pode digitalizar e editar.

A mesma ferramenta funciona ao contrário de um minificador CSS Minificar tiras a cada espaço, guia, quebra de linha e (opcionalmente) comentar que um navegador não precisa, colapsando a folha de estilo para o menor equivalente byte por byte Uma folha de estilo de 6 KB bem formatada geralmente cai abaixo de 4 KB quando o espaço em branco se foi, o que significa menos bytes na rede e uma primeira pintura mais rápida Embelezar enquanto você está escrevendo e depurando; minifique a cópia que você envia para a produção.

Este formatador entende as partes do CSS que tropeçam scripts ingênuos de encontrar e substituir. Regras de at aninhadas como @media e @supports mantêm suas regras internas recuadas corretamente, blocos @keyframes com etapas percentuais são preservados, literais de string no conteúdo e valores de url () são deixados exatamente como escritos e os comentários são mantidos ou removidos mediante solicitação Tudo é executado inteiramente em seu navegador, portanto, sua folha de estilo, incluindo quaisquer tokens de design proprietários ou nomes de classes internas, nunca é carregada e a ferramenta continua funcionando após a página ter sido carregada, mesmo sem conexão.

Um pequeno teste mostra o que este formatador CSS online faz. Cole @media (max-width:600px) {.nav a,.nav button{padding:8px 12px;color:#333}} e clique em Embelezar com 2 espaços A consulta de mídia abre seu próprio bloco, .nav a e .nav button vão em linhas separadas um nível em, e cada declaração fica em sua própria linha com um espaço após os dois pontos O emblema de tamanho lê 73 B → 98 B, +34%, porque o recuo adiciona bytes Clique em Minificar nessa saída e ela retorna aos 73 bytes originais.