Ferramentas para desenvolvedores
Analisador de Variáveis CSS
Analise propriedades personalizadas em CSS, faça a contagem de referências var() e identifique variáveis declaradas sem utilização.
Executar ferramenta
Esta ferramenta analisa folhas de estilo em texto para inspecionar propriedades personalizadas de CSS. Ao inserir o código CSS no campo de texto, o analisador extrai todas as declarações de variáveis com o formato habitual iniciado por dois traços e terminado em ponto e vírgula, guardando o respetivo nome e valor com espaçamentos ajustados. Em paralelo, a ferramenta pesquisa todas as utilizações no formato var(--nome) e calcula o número de chamadas de cada variável no documento fornecido.
O painel de resultados apresenta o resumo completo do ficheiro analisado: a listagem das declarações detetadas, o total de variáveis encontradas, o número de variáveis sem qualquer chamada e a quantidade de referências atribuída a cada nome. Esta informação permite auditar temas, organizar folhas de estilo extensas e identificar rapidamente definições redundantes ou órfãs antes de enviar alterações para produção.
Instruções
- Introduza ou cole o código CSS com as regras e declarações pretendidas na caixa de texto.
- Ative a análise premindo o botão de processamento da ferramenta.
- Examine a tabela de resultados com a lista de variáveis extraídas e os respetivos valores.
- Consulte a contagem de referências por variável para verificar quais estão ativas e quais não possuem chamadas no código.
Exemplos
- Introduzir o bloco ":root { --cor-principal: #0070f3; --margem-base: 16px; } body { color: var(--cor-principal); }" resulta na extração de duas variáveis (--cor-principal e --margem-base), registando uma referência para a cor e indicando a margem como não referenciada.
- Introduzir "div { --espaco: 8px; margin: var(--espaco); padding: var(--espaco); }" extrai a variável --espaco com o valor 8px e indica duas referências var() associadas.
Perguntas frequentes
Que formato de variável CSS é reconhecido pelo analisador?
A ferramenta reconhece declarações de propriedades personalizadas cujo nome comece com dois traços seguidos de carateres alfanuméricos ou hífenes, dois-pontos, valor e terminação em ponto e vírgula.
Como são contabilizadas as utilizações de variáveis?
O sistema pesquisa todas as ocorrências de var(--nome) no texto, somando uma chamada a cada variável correspondente encontrada, incluindo referências com valores de contingência dentro dos parênteses.
O que acontece se enviar o campo de texto vazio?
Quando o campo CSS se encontra totalmente vazio, o processamento não devolve resultados. Deve colar pelo menos um bloco de regras CSS válido para obter a análise.
A ferramenta valida a conformidade de todo o código CSS?
A análise foca-se exclusivamente na extração dos padrões de declaração e nas referências var(), não realizando validação semântica completa nem execução de regras avançadas de estilo.