Visão geral do CSS: identifique possíveis melhorias no CSS

Use o painel Visão geral do CSS para entender melhor o CSS da sua página e identificar possíveis melhorias.

Visão geral

O painel Visão geral do CSS cria um relatório das estatísticas de CSS do seu site. Esse relatório coleta dados sobre todas as ocorrências de CSS e até mesmo declarações não utilizadas. O painel Visão geral do CSS ajuda a investigar mais ocorrências com o destaque de página ou vinculando diretamente ao código afetado no painel Elementos.

Saiba como executar e repetir um relatório de visão geral do CSS e entenda o relatório de visão geral do CSS.

Abrir o painel "Visão geral de CSS"

  1. Abra qualquer página da Web, como esta página.
  2. Abra o DevTools.
  3. Selecione Mais. Personalizar e controlar as Ferramentas do desenvolvedor > Mais ferramentas > Visão geral do CSS.

    Visão geral de CSS no menu.

    Como alternativa, use o menu de comando para abrir o painel Visão geral do CSS.

    Mostrar o comando "Visão geral de CSS" no menu "Comandos".

Gerar e gerar novamente um relatório de visão geral de CSS

  1. Clique no botão Capturar visão geral para gerar um relatório de visão geral do CSS da sua página.

    Capturar visão geral de CSS.

  2. Para executar novamente uma visão geral do CSS, clique no ícone Limpar. Limpar visão geral e repita a primeira etapa.

    Limpar visão geral.

Entender o relatório de visão geral do CSS

O relatório é composto por cinco seções:

  1. Resumo da visão geral. Um resumo de alto nível do CSS da sua página. Resumo da visão geral.
  2. Cores. Todas as cores da página. As cores são agrupadas por tipos, como cores de plano de fundo, cores de texto etc. Essa seção também mostra textos com problemas de baixo contraste.

    Cores.

    Cada cor é clicável. Por exemplo, suponha que a cor da borda #DADCE0 não corresponda ao esquema de cores do site. Para conferir uma lista de elementos que usam essa cor, clique nela.

    Uma lista de elementos que usam a cor.

    Para destacar o elemento na página, passe o cursor sobre ele na lista.

    Passe o cursor sobre um elemento para destacá-lo na página.

    Para abrir o elemento no painel Elementos, clique nele na lista.

  3. Informações da fonte: todas as fontes da página e suas ocorrências, agrupadas por tamanho, peso e altura de linha diferentes. Assim como na seção Cores, para ver a lista de elementos afetados, clique nas ocorrências deles.

    Informações da fonte.

  4. Declarações não utilizadas. Todos os estilos que não têm efeito, agrupados por motivo.

    Declarações não usadas.

    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 conferir os elementos correspondentes, clique nas ocorrências.

  5. Media queries. Todas as consultas de mídia definidas na página, classificadas por número de ocorrências em ordem decrescente. Para conferir a lista de elementos afetados, clique nas ocorrências.

    Consultas de mídia.