Utilisez le panneau Présentation du CSS pour mieux comprendre le code CSS de votre page et identifier des améliorations potentielles.
Ouvrir le panneau "Présentation du CSS"
- Ouvrez une page Web, telle que cette page.
- Accédez aux Outils de développement.
Sélectionnez
Personnaliser et contrôler Outils de développement > Plus d'outils > Présentation CSS.
Vous pouvez également utiliser le menu Commande pour ouvrir le panneau Présentation de CSS.
Générer et réexécuter un rapport "Vue d'ensemble du CSS"
Cliquez sur le bouton Capturer l'aperçu pour générer un rapport "Vue d'ensemble CSS" de votre page.
Pour réexécuter une vue d'ensemble CSS, cliquez sur l'icône Effacer la vue d'ensemble
et répétez la première étape.
Comprendre le rapport "Vue d'ensemble du CSS"
Le rapport comprend cinq sections:
- Résumé de la vue d'ensemble. Résumé général du CSS de votre page.
Couleurs. Toutes les couleurs de votre page Les couleurs sont regroupées par types (couleurs d'arrière-plan, couleurs du texte, etc.). Cette section affiche également les textes qui présentent des problèmes de faible contraste.
Chaque couleur est cliquable. Par exemple, supposons que la couleur de bordure
#DADCE0ne corresponde pas au jeu de couleurs de votre site. Pour obtenir la liste des éléments qui utilisent cette couleur, cliquez sur la couleur.
Pour mettre en surbrillance l'élément sur la page, pointez dessus dans la liste.
Pour ouvrir l'élément dans le panneau Éléments, cliquez dessus dans la liste.
Informations sur la police : toutes les polices de votre page et leurs occurrences, regroupées par taille et épaisseur de police, et hauteur de ligne. Comme pour la section Couleurs, cliquez sur leurs occurrences pour afficher la liste des éléments concernés.
Déclarations inutilisées Tous les styles qui n'ont aucun effet, regroupés par motif.
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.
Requêtes média. Toutes les requêtes média 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.
