Rechercher des CSS non valides, remplacés, inactifs ou d'autres CSS

Sofia Emelianova

Dans ce guide, nous partons du principe que vous savez inspecter les fichiers CSS dans les outils pour les développeurs Chrome. Consultez l'article Afficher et modifier le CSS pour en savoir plus.

Inspecter le code CSS dont vous êtes l'auteur

Supposons que vous ayez ajouté du code CSS à un élément et que vous souhaitiez vous assurer que les nouveaux styles sont appliqués correctement. Lorsque vous actualisez la page, l'élément a le même aspect qu'avant. Un problème est survenu.

La première chose à faire est d'inspecter l'élément et de vous assurer que votre nouveau code CSS y est appliqué.

Votre nouveau code CSS s'affiche parfois dans le volet Éléments > Styles, mais il est en texte clair, non modifiable, barré, ou associé à une icône d'avertissement ou d'indice.

Comprendre le CSS dans le volet "Styles"

Le volet Styles identifie de nombreux types de problèmes CSS et les met en évidence de différentes manières.

Sélecteurs avec et sans correspondance

Le volet Styles affiche les sélecteurs correspondants en texte normal et les sélecteurs sans correspondance en texte clair.

Valeurs et déclarations non valides

Le volet Styles est barré et affiche icônes d'avertissement à côté des éléments suivants:

• Une déclaration CSS complète (propriété et valeur) lorsque la propriété CSS n'est pas valide ou est inconnue.
• Uniquement la valeur lorsque la propriété CSS est valide, mais que la valeur n'est pas valide.

Remplacées

Le volet Styles raye les propriétés qui sont remplacées par d'autres propriétés selon l'ordre en cascade.

Dans cet exemple, l'attribut de style width: 300px; de l'élément remplace width: 100% sur la classe .youtube.

Inactif

Le volet Styles s'affiche en texte clair et place des icônes d'informations à côté des propriétés valides, mais qui n'ont aucun effet en raison d'autres propriétés.

Ces propriétés claires sont inactives en raison de la logique CSS, et non de l'ordre en cascade.

Important : Les propriétés inactives claires diffèrent des propriétés non héritées. Les propriétés inactives sont accompagnées d'icônes. Pointez sur l'icône pour obtenir un indice sur le problème.

Dans cet exemple, la propriété display: block; désactive justify-content et align-items, qui contrôlent les mises en page modulables ou en grille.

Hérités et non héritées

Le volet Styles répertorie les propriétés des sections Inherited from <element-name> en fonction de leur héritage par défaut:

• Les valeurs héritées par défaut sont le texte standard.
• Les éléments non hérités par défaut sont en texte clair.

Important:

• Les propriétés claires non héritées sont différentes des propriétés inactives standards. Les propriétés non héritées n'ont pas d'icône et se trouvent dans les sections correspondantes.
• Remplacer l'héritage par défaut n'a aucune incidence sur la façon dont le volet Styles affiche les propriétés (pâles ou non).

Raccourci

Les propriétés de raccourci (concise) vous permettent de définir plusieurs propriétés CSS à la fois et d'améliorer la lisibilité de votre feuille de style. Toutefois, en raison de la nature abrégée de ces propriétés, vous risquez de manquer une propriété longue (exacte) qui remplace une propriété implicite.

Le volet Styles affiche les propriétés abrégées sous la forme de listes déroulantes contenant toutes les propriétés raccourcies.

Dans cet exemple, deux propriétés raccourcies sur quatre sont en fait remplacées.

Non modifiable

Le volet Styles affiche les propriétés qui ne peuvent pas être modifiées en italique. Par exemple, le CSS des sources suivantes ne peut pas être modifié:

• user agent stylesheet : feuille de style par défaut de Chrome.

  

• Les attributs HTML associés au style de l'élément (hauteur, largeur, couleur, etc.). Vous pouvez les modifier dans l'arborescence DOM afin de mettre à jour le code CSS dans le volet Styles, mais pas l'inverse.

  Dans cet exemple, l'attribut height="48" d'un élément <svg> est défini sur 50. La propriété correspondante est alors mise à jour sous svg[Attributes Style] dans le volet Styles.

Inspecter un élément dont le style n'est toujours pas celui que vous pensez

Pour tenter d'identifier le problème, vérifiez les points suivants:

• Documentation CSS et spécificité du sélecteur dans les info-bulles du volet Styles.
• Le volet Calculé, pour afficher le CSS final appliqué à un élément et effectuer une comparaison avec celui que vous avez déclaré.

Le volet Éléments > Styles affiche l'ensemble exact de règles CSS telles qu'elles sont rédigées dans différentes feuilles de style. En revanche, le volet Éléments > Calculé répertorie les valeurs CSS résolues que Chrome utilise pour afficher un élément:

• CSS dérivé de l'héritage
• Gagnants de la Cascade
• Propriétés longues (précises), pas abrégées (concise)
• Valeurs calculées, par exemple font-size: 14px au lieu de font-size: 70%

Comprendre le CSS dans le volet "Calculé"

Le volet Calculé affiche également diverses propriétés différemment.

Déclarée et héritée

Le volet Calculé répertorie les propriétés déclarées dans une feuille de style avec une police standard, qu'elles soient propres ou héritées. Cliquez sur l'icône de développement située à côté pour voir la source.

Pour voir la déclaration dans le volet Styles, pointez sur la propriété développée, puis cliquez sur le bouton en forme de flèche .

Pour afficher la déclaration dans le volet Sources, cliquez sur le lien vers le fichier source.

Pour les propriétés comportant plusieurs sources, le volet Calculé affiche en premier la cascade gagnante.

Environnement d'exécution

Le volet Calculé liste les valeurs de propriété calculées au moment de l'exécution en texte clair.

Dans cet exemple, Chrome a calculé ce qui suit pour l'élément <ul>:

• Le width relatif à son parent, <div>
• Le height relatif à ses enfants, les deux éléments <li>

Non héritées et personnalisées

Pour que le volet Calculé affiche toutes les propriétés et leurs valeurs, cochez la case Tout afficher. Toutes les propriétés incluent:

• Valeurs initiales des propriétés non héritées en texte clair.
• Propriétés personnalisées, avec le préfixe -- dans le texte standard. Ces propriétés sont héritées par défaut.

Important : Remplacer l'héritage par défaut n'a aucune incidence sur la façon dont le volet Calculé affiche les propriétés (pâles ou non).

Pour répartir cette longue liste en catégories, cochez Groupe.

Cet exemple présente les valeurs initiales des propriétés non héritées sous Animation et les propriétés personnalisées sous Variables CSS.

Rechercher des doublons

Pour examiner une propriété spécifique et ses doublons potentiels, saisissez le nom de cette propriété dans la zone de texte Filtre. Vous pouvez effectuer cette opération dans les volets Styles et Calculés.

Consultez Rechercher et filtrer le code CSS d'un élément.

Rechercher les ressources CSS inutilisées

Consultez la section Couverture: trouver les fichiers JavaScript et CSS inutilisés.