Otimizar estilos CSS com a ferramenta de visão geral do CSS

A ferramenta de visão geral do CSS captura uma visão geral do código CSS usado em uma página da Web e exibe um relatório sobre as cores, fontes e consultas de mídia usadas. A ferramenta também identifica possíveis problemas de contraste de cores e problemas de declarações CSS não utilizadas.

Abrir a ferramenta de visão geral do CSS

Para abrir a ferramenta de visão geral do CSS :

  1. Navegue até o aplicativo de demonstração da lista de tarefas pendentes no Microsoft Edge ou para sua própria página da Web.

  2. Abra o DevTools pressionando F12 ou Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS).

  3. Na barra de ferramentas principal, clique em Mais Ferramentas e selecione Visão geral do CSS na lista.

    Microsoft Edge, com o aplicativo de demonstração da lista de tarefas pendentes e DevTools ao lado, mostrando a lista de ferramentas do botão Mais Ferramentas

  4. A ferramenta de visão geral do CSS é aberta e mostra uma tela de boas-vindas.

    O Microsoft Edge, com o aplicativo de demonstração da lista de tarefas pendentes e o DevTools ao lado, mostrando a tela de boas-vindas da visão geral do CSS

Captura um relatório de visão geral CSS

Comece a usar a ferramenta capturando um novo relatório. Clique em Capturar visão geral, o relatório de visão geral é exibido.

Microsoft Edge, com o aplicativo de demonstração da lista de tarefas pendentes e DevTools ao lado, mostrando o relatório de visão geral do CSS para esse site

Se você fizer alterações em sua página da Web e quiser exibir um novo relatório, clique em Limpar visão geral e capture uma nova visão geral.

Microsoft Edge, com o aplicativo de demonstração da lista de tarefas pendentes e DevTools ao lado, mostrando um relatório de visão geral CSS com o botão Limpar visão geral na parte superior

Entender o relatório

O relatório de visão geral do CSS contém informações organizadas em várias seções:

  • Resumo geral: Estatísticas sobre as principais regras CSS, seletores e consultas de mídia na página.
  • Cores: cores usadas na página.
  • Informações da fonte: lista de fontes na página.
  • Declarações não utilizadas: Lista de declarações CSS não utilizadas.
  • Consultas de mídia: Lista de consultas de mídia.

Para exibir as seções do relatório, use a barra de rolagem ou clique nas seções na barra lateral:

Aplicativo de demonstração TODO à esquerda, relatório de visão geral do DevTools CSS à direita com uma lista clicável de seções e barra de rolagem

Resumo da visão geral

A seção de resumo da visão geral do relatório de visão geral do CSS é útil para obter uma visão geral rápida do seu código CSS. Ele fornece o número de folhas de estilo externas e embutidas, o número de regras CSS, o número de seletores e seus vários tipos e o número de consultas de mídia.

Isso pode ser usado para avaliar o volume e a consistência da base de código CSS em uma determinada página da Web. Por exemplo, se você decidiu usar apenas seletores de classe, a seção Resumo agilizará a detecção de outros tipos de seletores, como ID ou atributo.

Seção Cores

A seção Cores do relatório de visão geral do CSS lista todas as cores usadas na página da Web e as agrupa por categorias de plano de fundo, texto, preenchimento e borda.

Isso pode ser útil para descobrir casos em que várias cores semelhantes são usadas em vez de uma cor comum. As propriedades personalizadas CSS (também conhecidas como variáveis CSS) podem ser usadas para evitar a repetição de cores em um arquivo CSS e, assim, evitar esse problema. Saiba mais sobre variáveis CSS no MDN.

A seção Cores também contém uma lista de problemas de contraste de cores na página. Consulte Visualizar elementos com problemas de contraste de cor, abaixo.

Seção de informações da fonte

A seção Informações da fonte do relatório de visão geral do CSS lista todas as famílias de fontes usadas na página da Web e fornece detalhes sobre quais tamanhos, pesos e alturas de linha são usados para cada uma.

Ao criar uma página da Web, usar configurações de tipografia consistentes pode ajudar a alcançar um resultado esteticamente mais agradável. A seção Informações da fonte pode ser útil para detectar quando muitas fontes ou estilos de fonte diferentes são usados.

Cada fonte na seção Informações da fonte contém links para os elementos DOM aos quais elas se aplicam. Para revelar os elementos aos quais uma determinada fonte se aplica:

  1. No relatório de visão geral, clique em Informações da fonte na barra lateral para rolar até a seção relevante do relatório.

  2. Encontre a família de fontes e o tamanho, a peso ou a altura da linha em que você está interessado.

  3. Clique no link X ocorrências ao lado dele para revelar a lista de elementos.

  4. Mova o mouse sobre os elementos na lista para destacá-los na página renderizada.

    Microsoft Edge, com o aplicativo de demonstração de lista de tarefas pendentes e DevTools, mostrando a lista de elementos para um determinado tamanho de fonte e um elemento realçado ao focalizar

  5. Clique em um elemento para abrir automaticamente a ferramenta Elementos com esse elemento selecionado.

    Microsoft Edge, com o aplicativo de demonstração da lista de tarefas pendentes e DevTools, mostrando a ferramenta Elementos, com o nó direito selecionado

Declarações não utilizadas

A seção Declarações não usadas do relatório de visão geral do CSS lista algumas das declarações CSS que não afetam os elementos de destino.

As declarações CSS são pares de chave/valor, como top: 42px. As declarações CSS estão contidas em regras CSS e elas visam elementos específicos na página da Web. Dependendo de outros estilos aplicados a um elemento, uma declaração CSS pode não ter nenhum efeito.

Por exemplo, a top: 42px declaração não terá nenhum efeito se o elemento que ela visa não estiver posicionado com position: absolute ou position: relative , por exemplo.

Esses casos podem ser difíceis de encontrar e a seção Declarações não utilizadas ajuda listando alguns deles. Observe que nem todos os casos possíveis estão listados. Por enquanto, os seguintes casos são relatados:

  • Quando as toppropriedades , right, bottom, ou left são usadas em elementos posicionados estaticamente.
  • Quando as width propriedades ou height são usadas em elementos embutidos.
  • Quando a vertical-align propriedade é usada em elementos que não são células embutidas ou de tabela.

Consultas de mídia

A seção Consultas de mídia do relatório de visão geral do CSS lista as consultas de mídia CSS encontradas na página da Web.

As consultas de mídia CSS podem ser usadas para aplicar estilos específicos dependendo do tipo de mídia (por exemplo, print ou screen) ou dependendo do tamanho do visor. Isso geralmente é usado para fazer com que as páginas da Web respondam ao espaço disponível.

Quando uma base de código CSS se torna complexa, pode ser difícil acompanhar todas as consultas de mídia CSS. A seção Consultas de mídia torna isso mais fácil. Cada consulta de mídia na seção também contém um link para o arquivo CSS no qual ela está definida. Para revelar esse arquivo:

  1. No relatório de visão geral, clique em Consultas de mídia na barra lateral para rolar até a seção relevante do relatório.

  2. No relatório, localize a consulta de mídia na qual você está interessado.

  3. Clique no link de ocorrências X ao lado dele para revelar os arquivos correspondentes.

    Microsoft Edge, com o aplicativo de demonstração de lista de tarefas pendentes e DevTools, mostrando a seção de consultas de mídia da ferramenta Visão geral e a lista de arquivos que contêm uma determinada consulta de mídia

  4. Clique em um dos arquivos para abrir automaticamente a ferramenta Fontes com esse arquivo aberto.

    Microsoft Edge, com o aplicativo de demonstração da lista de tarefas pendentes e DevTools, mostrando a ferramenta Fontes, com o arquivo que contém uma consulta de mídia aberta, na linha direita

Seletores não simples

A seção Seletores não simples do relatório Visão geral do CSS lista os seletores CSS não simples encontrados na página da Web.

Em CSS, seletores simples são seletores com apenas um único componente (por exemplo, um único id seletor ou seletor de tipo). Esses seletores não são combinados com outros componentes do seletor ou combinadores. Todos os seletores básicos, atributos e pseudo-classes e pseudo-elementos únicos são seletores simples.

Seletores não simples são mais complicados e tendem a corresponder a mais elementos, resultando potencialmente em eventos de Recalcular Estilos de longa duração na ferramenta Desempenho . Você pode tentar alterar esses seletores para que eles sejam mais específicos e correspondam a menos elementos, reduzindo o tempo que o navegador leva para calcular estilos nos seguintes casos:

  • Quando elementos são adicionados ou removidos do DOM.
  • Quando os atributos de um elemento são alterados, como class ou id.
  • Quando ocorre uma entrada do usuário, como um movimento do mouse ou uma mudança de foco, o que pode afetar :hover as regras.

Para ver a lista de seletores não simples, no relatório de visão geral, clique em Seletores não simples na barra lateral para rolar até a seção relevante do relatório:

A lista de seletores não simples na ferramenta de visão geral do CSS

A partir daqui, você pode analisar ainda mais o impacto de suas alterações e o desempenho do seletor individual usando o recurso Estatísticas do Seletor na ferramenta Desempenho .

Confira também

Exibir elementos com problemas de contraste de cor

A seção Cores do relatório de visão geral também pode ser usada para localizar problemas de contraste de cores em uma página da Web. Se a página da web atual contiver elementos em que o contraste entre a cor da fonte e a cor da tela de fundo é insuficiente, a subseção Problemas de contraste será exibida.

Para localizar problemas de contraste de cores:

  1. Navegue até o site de demonstração do Animal Shelter , que tem problemas de contraste de cores, no Microsoft Edge. Ou navegue até seu próprio site.

  2. Abra o DevTools pressionando Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS).

  3. Na barra de ferramentas principal, clique em Mais Ferramentas e selecione Visão geral do CSS na lista.

  4. Na ferramenta de visão geral do CSS, clique em Capturar visão geral e, em seguida, clique em Cores na barra lateral do relatório de visão geral.

  5. Role para baixo até a subseção Problemas de contraste para exibir todos os problemas.

    Microsoft Edge, com o aplicativo de demonstração de lista de tarefas pendentes e DevTools, mostrando uma lista de problemas de contraste no relatório de visão geral do CSS

  6. Para exibir os elementos que têm um problema específico de contraste de cor, escolha o problema que deseja corrigir e clique em Texto. Os elementos correspondentes são listados.

    Microsoft Edge, com o aplicativo de demonstração de lista de tarefas pendentes e DevTools, mostrando uma lista de elementos com problema de contraste de cor

  7. Para abrir o elemento correspondente na ferramenta Elementos , clique em um elemento na lista.

    Microsoft Edge, com o aplicativo de demonstração de lista de tarefas pendentes e DevTools, mostrando a ferramenta Elementos, com o elemento de problema de contraste de cor selecionado

Para ajudar a corrigir problemas de contraste, marcar a seção Contraste de texto dos recursos do DevTools para teste de acessibilidade.

Confira também

  • Last updated on