Embelezador CSS

Cole CSS de um artefato de build, bloco de estilo inline ou projeto antigo e receba uma versão com recuo uniforme e declarações separadas. Durante a leitura, o formatador respeita strings entre aspas, comentários, colchetes e parênteses. Ele também verifica a estrutura dos blocos e retorna um erro de entrada quando as chaves de abertura e fechamento não estão equilibradas.

Transforme folhas compactadas em código legível

O CSS de produção costuma ser minificado para reduzir o tamanho da transferência. Isso ajuda o navegador, mas dificulta o trabalho de quem precisa entender o código. Seletores, declarações, media queries e blocos aninhados podem virar uma única linha, tornando até uma pequena alteração difícil de examinar. Este embelezador recupera uma estrutura visual previsível: cada chave de abertura inicia um bloco recuado, cada ponto e vírgula que encerra uma declaração abre uma nova linha e cada chave de fechamento retorna ao nível anterior. O espaço entre tokens comuns é uniformizado sem modificar texto dentro de strings ou comentários. O resultado é útil quando o inspetor do navegador, uma pasta de build, um template de e-mail ou um tema de terceiros é a única fonte disponível. Em vez de inserir quebras manualmente e contar blocos aninhados, você recebe uma representação estável para ler ou copiar em um editor. A ferramenta não tenta validar todo recurso de CSS, ordenar declarações ou alterar decisões de estilo; ela se concentra em revelar a estrutura enviada.

Como o formatador protege os valores CSS

Um formatador seguro precisa entender que a pontuação nem sempre controla a estrutura da folha. Um ponto e vírgula dentro de um valor entre aspas faz parte do conteúdo, não encerra uma declaração. Chaves em uma string são caracteres, e a pontuação dentro de uma função, como uma URL de dados, não deve ser interpretada como separador de propriedades. Por isso, o formatador percorre o texto caractere por caractere e acompanha strings, escapes, comentários, parênteses e colchetes. As quebras estruturais só são adicionadas quando a pontuação aparece fora desses contextos protegidos. Dessa forma, rótulos, URLs incorporadas, seletores de atributos e funções complexas permanecem intactos, enquanto os blocos comuns ficam legíveis. Os comentários continuam junto ao código, em vez de serem removidos. A operação é determinística: entradas idênticas sempre geram saídas idênticas, sem rede, relógio, escolhas aleatórias ou variações do ambiente.

Detecte blocos incompletos antes da próxima etapa

O embelezamento também funciona como verificação estrutural quando o CSS foi copiado de uma resposta parcial, painel do navegador ou arquivo gerado. O analisador conta todas as chaves estruturais de abertura e fechamento, ignorando caracteres de chave dentro de strings, comentários, parênteses ou colchetes. Se uma chave de fechamento aparecer sem uma abertura correspondente, a solicitação falha e informa a posição do caractere. Se a leitura terminar com blocos abertos, o erro informa quantos ainda não foram fechados. Essa validação é intencionalmente específica: chaves equilibradas não garantem que toda propriedade, valor, seletor ou regra seja válida em determinado navegador. Elas garantem que o formatador não apresentará silenciosamente um bloco truncado como resultado correto. Use a saída limpa em revisões, comparações no controle de versão, documentação ou validações posteriores. O uso no navegador é gratuito; a formatação automatizada pela API aplica o preço-base publicado de US$ 0,002 por solicitação.