Painel CSS Overview

No Chrome DevTools, abra o painel Visão geral de CSS por meio de Cmd+Shift+P → "Visão geral de CSS". Clique em "Capturar visão geral" para analisar toda a folha de estilos da página atual. O painel resume cores, fontes, consultas de mídia e declarações não utilizadas.

A seção Cores lista todos os valores de cor usados no CSS da página — hexadecimais, rgb, nomeados e paradas de gradiente — agrupados por tipo. Clicar em uma cor mostra quais elementos e propriedades a utilizam, revelando variações não intencionais de cor e a proliferação da paleta.

A seção Fontes lista todas as combinações de font-family, font-size e font-weight aplicadas à página. Ela revela as alternativas da pilha de fontes, destaca escalas tipográficas inconsistentes e mostra quais elementos usam cada combinação.

A seção Consultas de mídia lista cada regra @media, seus pontos de quebra e o número de declarações contidas nela. Essa visão geral revela inconsistências nos pontos de quebra — às vezes, as equipes acumulam mais de 15 valores de pontos de quebra ligeiramente diferentes em uma base de código.

A Visão geral de CSS sinaliza declarações que nunca são aplicadas devido a conflitos de especificidade ou seletores que não correspondem. Isso é diferente de Cobertura — ela detecta regras sempre substituídas sem exigir interação do usuário para ativá-las.

O painel destaca cores de texto que não atingem as proporções de contraste AA ou AAA da WCAG em relação ao plano de fundo. Clicar em uma falha de contraste seleciona o elemento no DOM, facilitando a correção de problemas de acessibilidade sem ferramentas separadas.

Use a Visão geral de CSS após reformulações importantes ou ao começar a trabalhar em uma base de código existente. O resumo das cores revela o quanto a implementação se desviou dos tokens de projeto. O resumo das fontes revela inconsistências tipográficas antes que os usuários as percebam.

Execute a Visão geral de CSS em várias páginas do mesmo aplicativo. Comparar os resumos de cores e fontes revela desvios entre páginas — componentes que são renderizados com tipografia ou cores diferentes das de seus equivalentes em outras páginas.

Exporte os dados de cores da Visão geral de CSS e compare-os com a paleta de tokens de projeto. As cores presentes na visão geral, mas ausentes da paleta de tokens, são valores codificados diretamente que devem ser convertidos em referências de tokens e removidos como valores independentes.

Liste os pontos de quebra da Visão geral de CSS, identifique duplicatas e valores quase duplicados (768px, 769px, 770px de desenvolvedores diferentes), consolide-os na escala de pontos de quebra do seu sistema de projeto e atualize todas as consultas de mídia para usar propriedades personalizadas do CSS ou variáveis SCSS.

A Visão geral de CSS analisa folhas de estilos vinculadas — não estilos embutidos nem estilos de execução CSS-in-JS. Classes dinâmicas adicionadas pelo JavaScript após a renderização inicial podem não aparecer. Complemente a análise com Cobertura e inspeção manual para obter uma cobertura completa dos estilos dinâmicos.

Que tipo de problema de acessibilidade a Visão geral de CSS detecta?

A Visão geral de CSS fornece uma auditoria no nível da página de cores, fontes, pontos de quebra de consultas de mídia e problemas de contraste. Use-a para detectar desvios em relação ao projeto, proliferação da paleta, inconsistências tipográficas e falhas de acessibilidade antes que se acumulem e se transformem em uma dívida técnica difícil e cara de desfazer.