Panneau CSS Overview

Dans les DevTools de Chrome, ouvrez le panneau Aperçu CSS via Cmd+Shift+P → « Aperçu CSS ». Cliquez sur « Capturer l’aperçu » pour analyser l’ensemble de la feuille de styles de la page actuelle. Le panneau récapitule les couleurs, les polices, les requêtes de média et les déclarations inutilisées.

La section Couleurs répertorie chaque valeur de couleur utilisée dans le CSS de la page — hexadécimale, RVB, nommée ou correspondant à un point d’arrêt de dégradé — et les regroupe par type. Cliquer sur une couleur indique quels éléments et quelles propriétés l’utilisent, ce qui révèle les variations de couleur involontaires et la prolifération de la palette.

La section Polices répertorie chaque combinaison de famille, de taille et de graisse de police appliquée à la page. Elle révèle les solutions de repli de la pile de polices, met en évidence les échelles typographiques incohérentes et indique quels éléments utilisent chaque combinaison.

La section Requêtes de média répertorie chaque règle @media, ses points de rupture et le nombre de déclarations qu’elle contient. Cette vue d’ensemble révèle les incohérences entre les points de rupture — les équipes finissent parfois par accumuler plus de 15 valeurs de points de rupture légèrement différentes dans une même base de code.

L’aperçu CSS signale les déclarations qui ne sont jamais appliquées en raison de conflits de spécificité ou de sélecteurs qui ne correspondent pas. Cela se distingue de la couverture : il détecte les règles toujours remplacées sans nécessiter d’interaction de l’utilisateur pour les activer.

Le panneau met en évidence les couleurs de texte qui n’atteignent pas les rapports de contraste AA ou AAA de WCAG avec leur arrière-plan. Cliquer sur un échec de contraste sélectionne l’élément dans le DOM, ce qui permet de corriger facilement les problèmes d’accessibilité sans outil distinct.

Utilisez l’aperçu CSS après une refonte importante ou lors de votre arrivée sur une base de code existante. Le résumé des couleurs révèle l’écart entre l’implémentation et les jetons de conception. Le résumé des polices révèle les incohérences typographiques avant que les utilisateurs ne les remarquent.

Exécutez l’aperçu CSS sur plusieurs pages de la même application. La comparaison de leurs résumés de couleurs et de polices révèle les écarts entre les pages : des composants qui utilisent une typographie ou une couleur différente de leurs équivalents sur d’autres pages.

Exportez les données de couleurs depuis l’aperçu CSS et comparez-les à la palette de jetons de conception. Les couleurs présentes dans l’aperçu mais absentes de la palette de jetons sont des valeurs codées en dur qui devraient être converties en références de jetons, puis supprimées en tant que valeurs autonomes.

Répertoriez les points de rupture de l’aperçu CSS, repérez les doublons et les quasi-doublons (768px, 769px, 770px provenant de développeurs différents), regroupez-les dans l’échelle de points de rupture de votre système de conception, puis mettez à jour toutes les requêtes de média afin qu’elles utilisent des propriétés personnalisées CSS ou des variables SCSS.

L’aperçu CSS analyse les feuilles de styles liées, mais pas les styles intégrés ni les styles d’exécution CSS-in-JS. Les classes dynamiques ajoutées par JavaScript après le rendu initial peuvent ne pas apparaître. Complétez cette analyse par la couverture et une inspection manuelle pour obtenir une couverture complète des styles dynamiques.

Quel type de problème d’accessibilité l’aperçu CSS détecte-t-il ?

L’aperçu CSS fournit un audit à l’échelle de la page des couleurs, des polices, des points de rupture des requêtes de média et des problèmes de contraste. Utilisez-le pour détecter les écarts de conception, la prolifération de la palette, les incohérences typographiques et les défaillances d’accessibilité avant qu’elles ne s’accumulent en une dette technique coûteuse à démêler.