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

Sofia Emelianova
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.

Sélecteurs avec correspondance en texte normal et sélecteurs sans correspondance en texte clair.

Valeurs et déclarations non valides

Le volet Styles est barré et affiche Avertissement. 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.

Nom de propriété non valide et valeur de propriété non 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 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.

Déclaration CSS inactive avec indice

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.

Fiche de la section &quot;Hérité du corps&quot; des CSS hérités et non hérités.

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 Menu déroulant. contenant toutes les propriétés raccourcies.

Propriété abrégée avec une liste déroulante.

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.

    Le CSS de la feuille de style user-agent.

  • 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:

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 Développer. située à côté pour voir la source.

Propriétés déclarées.

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 Flèche vers la droite..

La flèche à côté de la propriété

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

Lien vers le fichier source.

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

Une propriété avec plusieurs sources.

Environnement d'exécution

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

Les valeurs de propriété sont calculées au moment de l&#39;exécution.

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 Case à cocher. Tout afficher. Toutes les propriétés incluent:

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

Toutes les propriétés sont regroupées.

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.

Zones de texte &quot;Filtrer&quot; dans les volets &quot;Styles&quot; et &quot;Calculés&quot;.

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.