Présentation du CSS: identifier les améliorations potentielles du CSS

Jecelyn Yeen

Le panneau Présentation du CSS vous permet de mieux comprendre le CSS de votre page et d'identifier les améliorations potentielles.

Présentation

Le panneau Présentation du CSS crée un rapport sur les statistiques CSS de votre site Web. Ce rapport collecte des données sur toutes les occurrences CSS et même les déclarations inutilisées. Le panneau Présentation du CSS vous aide à examiner les occurrences plus en détail grâce à la mise en surbrillance de la page ou à l'ajout d'un lien direct vers le code concerné dans le panneau Éléments.

Découvrez comment exécuter et réexécuter un rapport "Présentation du CSS" et comprendre le rapport "Présentation du CSS".

Ouvrir le panneau "Présentation du CSS"

  1. Ouvrez une page Web, telle que cette page.
  2. Ouvrez les outils de développement.

  3. Sélectionnez Plus. Customize and control DevTools (Personnaliser et contrôler les outils de développement) > Plus d'outils > Présentation du CSS :

    Présentation du CSS dans le menu.

    Vous pouvez également utiliser le menu de commandes pour ouvrir le panneau CSS Overview (Aperçu CSS).

    Afficher la commande Aperçu CSS dans le menu de commandes.

Générer et générer à nouveau un rapport "Vue d'ensemble du CSS"

  1. Cliquez sur le bouton Capture Overview (Capturer la vue d'ensemble) pour générer un rapport "Vue d'ensemble CSS" de votre page.

    Capturer l'aperçu CSS

  2. Pour réexécuter une présentation CSS, cliquez sur l'icône Effacer. Clear Overview (Effacer la présentation) et répétez la première étape.

    Effacer l'aperçu.

Comprendre le rapport "Vue d'ensemble des CSS"

Le rapport comporte cinq sections:

  1. Résumé. Résumé général du CSS de votre page. Résumé de la vue d'ensemble.

  2. Couleurs : Toutes les couleurs de votre page. Les couleurs sont regroupées par type, comme les couleurs d'arrière-plan, les couleurs du texte, etc. Cette section présente également les textes qui présentent des problèmes de contraste faible.

    Couleurs.

    Chaque couleur est cliquable. Par exemple, supposons que la couleur de bordure #DADCE0 ne corresponde pas au jeu de couleurs de votre site. Pour obtenir la liste des éléments qui utilisent cette couleur, cliquez sur la couleur.

    Liste d'éléments qui utilisent la couleur.

    Pour mettre en surbrillance l'élément sur la page, pointez dessus dans la liste.

    Pointez sur un élément pour le mettre en surbrillance sur la page.

    Pour ouvrir l'élément dans le panneau Éléments, cliquez dessus dans la liste.

  3. Informations sur la police : Toutes les polices de votre page et leurs occurrences, regroupées par taille de police, épaisseur de police et hauteur de ligne différentes. Comme dans la section Couleurs, cliquez sur leurs occurrences pour afficher la liste des éléments concernés.

    Informations sur la police.

  4. Déclarations inutilisées : Tous les styles qui n'ont aucun effet, regroupés par motif.

    Déclarations inutilisées.

    Par exemple, les deux déclarations ci-dessus ne sont pas utilisées, car le contenu détermine la hauteur et la largeur d'un élément intégré. Pour afficher les éléments correspondants, cliquez sur les occurrences.

  5. Requêtes média : Toutes les requêtes média définies sur votre page, triées par nombre d'occurrences par ordre décroissant. Pour afficher la liste des éléments concernés, cliquez sur leurs occurrences.

    Requêtes média.