Use o painel Visão geral do CSS para entender melhor o CSS da sua página e identificar possíveis melhorias.
Abrir o painel de visão geral do CSS
- Abra qualquer página da Web, como esta página.
- Abra o DevTools.
Selecione
Personalizar e controlar DevTools > More tools > CSS Overview.
Como alternativa, use o Command Menu para abrir o painel CSS Overview.
Gerar e gerar novamente um relatório de visão geral do CSS
Clique no botão Capturar visão geral para gerar um relatório de visão geral do CSS da sua página.
Para executar novamente a CSS Overview, clique no ícone
Clear Overview e repita a primeira etapa.
Como interpretar o Relatório de visão geral do CSS
O relatório tem cinco seções:
- Resumo da visão geral. Um resumo detalhado do CSS da sua página.
Cores. Todas as cores da sua página. As cores são agrupadas por tipos, como cores de fundo, cores de texto etc. Essa seção também mostra textos com problemas de baixo contraste.
Cada cor é clicável. Por exemplo, suponha que a cor da borda
#DADCE0não corresponda ao esquema de cores do seu site. Para ver uma lista dos elementos que usam essa cor, clique nela.
Para destacar um elemento na página, passe o cursor sobre ele na lista.
Para abrir o elemento no painel Elementos, clique nele na lista.
Informações da fonte: todas as fontes da sua página e as ocorrências delas, agrupadas por tamanho diferente, espessura e altura da linha. Assim como na seção Cores, clique nas ocorrências correspondentes para ver a lista de elementos afetados.
Declarações não utilizadas. Todos os estilos que não têm efeito, agrupados por motivo.
Por exemplo, as duas declarações acima não são usadas porque o conteúdo determina a altura e a largura de um elemento inline. Para visualizar os elementos correspondentes, clique nas ocorrências.
Consultas de mídia: Todas as consultas de mídia definidas em sua página, classificadas em ordem decrescente por número de ocorrências. Para ver a lista de elementos afetados, clique nas ocorrências correspondentes.
