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 "Visão geral do CSS"
- Abra qualquer página da Web, como esta página.
- Abra o DevTools.
Selecione
Personalizar e controlar DevTools > Mais ferramentas > Visão geral de CSS.
Como alternativa, use o Menu de comando para abrir o painel Visão geral do CSS.
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 de CSS da sua página.
Para gerar de novo a visão geral do CSS, clique no ícone
Limpar visão geral e repita a primeira etapa.
Entender o Relatório de visão geral do CSS
O relatório é composto por cinco seções:
- Resumo da visão geral. Um resumo de alto nível do CSS da sua página.
Cores. Todas as cores da sua página. As cores são agrupadas por tipo, como cores de fundo, cores de texto etc. Esta seção também mostra textos com problemas de baixo contraste.
É possível clicar em cada cor. Por exemplo, suponha que a cor da borda
#DADCE0não corresponda ao esquema de cores do seu site. Para conferir uma lista de elementos que usam essa cor, clique nela.
Para destacar o 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 diferentes tamanho, espessura e altura da linha. Assim como na seção Cores, para ver a lista de elementos afetados, clique nas ocorrências.
Declarações não usadas. 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 in-line. Para visualizar os elementos correspondentes, clique nas ocorrências.
Consultas de mídia. Todas as consultas de mídia definidas na sua página, classificadas em ordem decrescente por número de ocorrências. Para conferir a lista de elementos afetados, clique nas ocorrências.
