Compartilhar via

Otimizar estilos CSS com a ferramenta de descrição geral do CSS

A ferramenta de descrição geral do CSS captura uma descrição geral do código CSS utilizado numa página Web e apresenta um relatório sobre as cores, tipos de letra e consultas multimédia utilizadas. A ferramenta também identifica potenciais problemas de contraste de cores e problemas de declarações CSS não utilizadas.

Abrir a ferramenta de descrição geral do CSS

Para abrir a ferramenta de descrição geral do CSS :

  1. Navegue para a aplicação de demonstração lista TODO no Microsoft Edge ou para a sua própria página Web.

  2. Abra As DevTools ao premir F12 ou Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS).

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

    Microsoft Edge, com a aplicação de demonstração Lista de tarefas e DevTools junto à mesma, a mostrar a lista de ferramentas do botão Mais Ferramentas

  4. A ferramenta de descrição geral do CSS é aberta e mostra um ecrã de boas-vindas.

    Microsoft Edge, com a aplicação de demonstração lista TODO e DevTools junto à mesma, a mostrar o ecrã de boas-vindas da descrição geral do CSS

Capturar um relatório de descrição geral do CSS

Comece a utilizar a ferramenta ao capturar um novo relatório. Clique em Descrição geral da captura, é apresentado o relatório de descrição geral.

Microsoft Edge, com a aplicação de demonstração lista TODO e DevTools junto à mesma, a mostrar o relatório de descrição geral do CSS desse site

Se fizer alterações à sua página Web e quiser ver um novo relatório, clique em Limpar descrição geral e, em seguida, capture uma nova descrição geral.

O Microsoft Edge, com a aplicação de demonstração Lista de tarefas e DevTools junto ao mesmo, a mostrar um relatório de descrição geral do CSS com o botão Limpar descrição geral na parte superior

Compreender o relatório

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

  • Resumo da descrição geral: estatísticas sobre as principais regras do CSS, seletores e consultas multimédia na página.
  • Cores: cores utilizadas na página.
  • Informações do tipo de letra: lista de tipos de letra na página.
  • Declarações não utilizadas: lista de declarações CSS não utilizadas.
  • Consultas de multimédia: lista de consultas multimédia.

Para ver as secções do relatório, utilize a barra de deslocamento ou clique nas secções na barra lateral:

Aplicação de demonstração TODO à esquerda, relatório de descrição geral do CSS de DevTools à direita com uma lista clicável de secções e barra de deslocamento

Resumo da descrição geral

A secção Resumo da descrição geral do relatório de descrição geral do CSS é útil para obter uma descrição geral rápida do código CSS. Fornece o número de folhas de estilo externas e inline, o número de regras CSS, o número de seletores e os seus vários tipos e o número de consultas multimédia.

Isto pode ser utilizado para avaliar o volume e a consistência do seu código base CSS numa determinada página Web. Por exemplo, se decidiu utilizar apenas seletores de classe, a secção Resumo fará com que seja rápido detetar outros tipos de seletores, como ID ou atributo.

Secção Cores

A secção Cores do relatório de descrição geral do CSS lista todas as cores utilizadas na página Web e agrupa-as por categorias de fundo, texto, preenchimento e limite.

Isto pode ser útil para detetar casos em que são utilizadas várias cores semelhantes em vez de uma cor comum. As propriedades personalizadas CSS (também conhecidas como variáveis CSS) podem ser utilizadas para evitar a repetição de cores num ficheiro CSS e, por conseguinte, evitar este problema. Saiba mais sobre as variáveis CSS na MDN.

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

Secção Informações do tipo de letra

A secção Informações do tipo de letra do relatório de descrição geral do CSS lista todas as famílias de tipos de letra utilizadas na página Web e fornece detalhes sobre que tamanhos, pesos e alturas de linha são utilizados para cada um.

Ao criar uma página Web, a utilização de definições de tipografia consistentes pode ajudar a alcançar um resultado mais esteticamente agradável. A secção Informações do tipo de letra pode ser útil para detetar quando são utilizados demasiados tipos de letra ou estilos de tipo de letra diferentes.

Cada tipo de letra na secção Informações do tipo de letra contém ligações para os elementos DOM aos quais se aplicam. Para revelar os elementos a que um determinado tipo de letra se aplica:

  1. No relatório de descrição geral, clique em Informações do tipo de letra na barra lateral para se deslocar para a secção relevante do relatório.

  2. Localize a família do tipo de letra e o tamanho, peso ou altura da linha em que está interessado.

  3. Clique na ligação Ocorrências X junto à mesma para revelar a lista de elementos.

  4. Mova o rato sobre os elementos na lista para realçá-los na página composta.

    Microsoft Edge, com a aplicação de demonstração LISTA DE TAREFAs e DevTools, a mostrar a lista de elementos para um determinado tamanho de tipo de letra e um elemento realçado ao pairar o rato

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

    Microsoft Edge, com a aplicação de demonstração LISTA DE TAREFAs e DevTools, a mostrar a ferramenta Elementos, com o nó direito selecionado

Declarações não utilizadas

A secção Declarações não utilizadas do relatório de descrição geral do CSS lista algumas das declarações CSS que não têm efeito nos respetivos elementos de destino.

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

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

Estes casos podem ser difíceis de encontrar e a secção Declarações não utilizadas ajuda ao listar alguns deles. Tenha em atenção que nem todos os casos possíveis estão listados. Por agora, são comunicados os seguintes casos:

  • Quando as toppropriedades , right, bottomou left são utilizadas em elementos estaticamente posicionados.
  • Quando as width propriedades ou height são utilizadas em elementos inline.
  • Quando a vertical-align propriedade é utilizada em elementos que não estão inline ou células de tabela.

Consultas de multimédia

A secção Consultas de multimédia do relatório de descrição geral do CSS lista as consultas de multimédia CSS encontradas na página Web.

As consultas de multimédia CSS podem ser utilizadas para aplicar estilos específicos consoante o tipo de suporte de dados (por exemplo print , ou screen) ou consoante o tamanho da janela viewport. Isto é frequentemente utilizado para fazer com que as páginas Web respondam ao espaço disponível.

Quando uma base de código CSS se torna complexa, controlar todas as consultas de multimédia CSS pode ser difícil. A secção Consultas de multimédia torna isto mais fácil. Cada consulta multimédia na secção também contém uma ligação para o ficheiro CSS no qual está definido. Para revelar esse ficheiro:

  1. No relatório de descrição geral, clique em Consultas de multimédia na barra lateral para se deslocar para a secção relevante do relatório.

  2. No relatório, localize a consulta multimédia em que está interessado.

  3. Clique na ligação Ocorrências X junto à mesma para revelar os ficheiros correspondentes.

    Microsoft Edge, com a aplicação de demonstração lista TODO e DevTools, a mostrar a secção de consultas multimédia da ferramenta Descrição Geral e a lista de ficheiros que contêm uma determinada consulta multimédia

  4. Clique num dos ficheiros para abrir automaticamente a ferramenta Origens com esse ficheiro aberto.

    Microsoft Edge, com a aplicação de demonstração lista TODO e DevTools, a mostrar a ferramenta Origens, com o ficheiro que contém uma consulta multimédia aberta, na linha direita

Seletores não simples

A secção Seletores não simples do relatório de descrição geral do CSS lista os seletores CSS não simples encontrados na página Web.

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

Os seletores não simples são mais complicados e tendem a corresponder a mais elementos, o que pode resultar em eventos de Recalcular Estilos de execução prolongada na ferramenta Desempenho . Pode tentar alterar estes seletores para que sejam mais específicos e correspondam a menos elementos, reduzindo o tempo que o browser demora a calcular estilos nos seguintes casos:

  • Quando os elementos são adicionados ou removidos do DOM.
  • Quando os atributos de um elemento são alterados, como class ou id.
  • Quando ocorrem entradas de utilizadores, como um movimento do rato ou uma alteração de foco, o que pode afetar :hover as regras.

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

A lista Seletores não simples na ferramenta de descrição geral do CSS

A partir daqui, pode analisar ainda mais o impacto das suas alterações e o desempenho do seletor individual através da funcionalidade Estatísticas do Seletor na ferramenta Desempenho .

Confira também

Ver elementos com problemas de contraste de cor

A secção Cores do relatório de descrição geral também pode ser utilizada para encontrar problemas de contraste de cores numa página Web. Se a página Web atual contiver elementos em que o contraste entre a cor do tipo de letra e a cor de fundo é insuficiente, será apresentada a sub-secção Problemas de contraste .

Para encontrar problemas de contraste de cor:

  1. Navegue para o site de demonstração do Abrigo para Animais , que tem problemas de contraste de cor, no Microsoft Edge. Em alternativa, navegue para o seu próprio site.

  2. Abra As DevTools ao premir Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS).

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

  4. Na ferramenta de descrição geral do CSS , clique em Descrição geral da captura e, em seguida, clique em Cores na barra lateral do relatório de descrição geral.

  5. Desloque-se para baixo até à sub-secção Problemas de contraste para ver todos os problemas.

    Microsoft Edge, com a aplicação de demonstração lista TODO e DevTools, a mostrar uma lista de problemas de contraste no relatório de descrição geral do CSS

  6. Para ver os elementos que têm um problema de contraste de cor específico, selecione o problema que pretende corrigir e clique em Texto. Os elementos correspondentes estão listados.

    Microsoft Edge, com a aplicação de demonstração LISTA DE TAREFAs e DevTools, a mostrar uma lista de elementos com um problema de contraste de cor

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

    Microsoft Edge, com a aplicação de demonstração lista TODO e DevTools, a mostrar a ferramenta Elementos, com o elemento de problema de contraste de cores selecionado

Para ajudar a corrigir problemas de contraste, marcar a secção Contraste de texto das funcionalidades de DevTools de teste de acessibilidade.

Confira também