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

Jecelyn Yeen

Utilisez le panneau CSS Overview (Aperçu CSS) pour mieux comprendre le CSS de votre page et 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 de CSS, y compris les déclarations inutilisées. Le panneau Présentation du CSS vous aide à examiner plus en détail les occurrences grâce à la mise en surbrillance de la page ou en créant un lien direct vers le code concerné dans le panneau Éléments.

Découvrez comment exécuter et réexécuter un rapport "Vue d'ensemble du CSS" et comprendre le rapport "Vue d'ensemble du CSS".

Ouvrir le panneau "Présentation du CSS"

  1. Ouvrez n'importe quelle page Web, comme cette page.
  2. Accédez aux outils de développement.

  3. Sélectionnez Plus. 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 ouvrir le panneau Présentation du CSS à l'aide du menu de commandes.

    Commande "Afficher l'aperçu CSS" dans le menu de commandes

Générer et réexécuter un rapport "Présentation du CSS"

  1. Cliquez sur le bouton Capturer un aperçu pour générer un rapport "Vue d'ensemble du CSS" de votre page.

    Capturez l'aperçu CSS.

  2. Pour réexécuter une vue d'ensemble CSS, cliquez sur l'icône Effacer. Effacer la vue d'ensemble, puis répétez la première étape.

    Effacer l'aperçu.

Comprendre le rapport "Présentation du CSS"

Le rapport se compose de cinq sections:

  1. Résumé de la présentation Résumé général du CSS de votre page. Résumé de l'aperçu.

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

    Couleurs.

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

    Liste des é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 Elements (Éléments), cliquez dessus dans la liste.

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

    Informations sur la police.

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

    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 multimédias Toutes les requêtes multimédias définies sur votre page, triées par nombre d'occurrences dans l'ordre décroissant. Pour afficher la liste des éléments concernés, cliquez sur leurs occurrences.

    Requêtes multimédias.