Cours CSS / Inspecter et modifier les styles avec les outils de développement

Les outils de développement du navigateur permettent d'inspecter quelles déclarations CSS correspondent à un élément et quelles valeurs sont finalement utilisées. Styles explique les règles correspondantes et celles qui sont remplacées, tandis que Computed (valeurs calculées) vous aide à vérifier les valeurs de propriété résultantes ; les modifications dans DevTools sont normalement temporaires.

Préparez l'exemple et le résultat attendu

Enregistrez tout le code ci-dessous sous le nom index.html au format UTF-8 et ouvrez-le dans votre navigateur. Dans cet exemple, le paragraphe des heures d'ouverture est affiché en vert et le premier paragraphe général est affiché en gris. L'avis comprend un espacement intérieur de 16px et un fond clair pour permettre la comparaison des résultats par attribut.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1 { color: #087f5b; }
    p { color: #666; }
    .notice {
      color: #087f5b;
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p>A place to grow plants and take a break.</p>
  <p class="notice">We open at 9 a.m. every day.</p>
</body>
</html>

Puisque nous avons placé le CSS dans l'élément style en même temps que le HTML du corps, la source de l'exercice se trouve dans un seul fichier. Si vous vous entraînez déjà avec un CSS externe, vous pouvez mettre la même règle dans style.css, mais le nom du fichier et le numéro de ligne affichés dans les outils de développement seront différents. Après avoir confirmé que le texte attendu apparaît à l'écran, ouvrez les outils de développement.

Sélectionnez l'élément correct dans Elements

1. Cliquez avec le bouton droit sur la phrase « We open at 9 a.m. every day. » sur la page et choisissez Inspecter. Dans Chrome ou Edge sous Windows, vous pouvez également ouvrir les Outils de développement avec F12 ou Ctrl+Shift+I.
2. Dans l'onglet Elements, vérifiez que la ligne sélectionnée est <p class="notice">. Si un autre élément est sélectionné, appuyez sur l'outil de sélection d'élément et sélectionnez à nouveau la notice. L'emplacement des outils et la langue du menu peuvent varier selon le navigateur/version.
3. Ouvrez Styles à côté ou en dessous de l'élément sélectionné. Remarquez que les règles .notice et p sont visibles. Dans les fenêtres étroites, les panneaux peuvent être placés en bas ou certains onglets peuvent se trouver dans le menu Aperçu.

Ce que Elements expose est le Document Object Model (DOM), qui est la structure du document interprétée par le navigateur. Il ne ressemble pas toujours à la source de la page. Lorsqu'un navigateur corrige un HTML incorrect ou que JavaScript remplace un élément, la sélection réelle doit être déterminée par rapport à la structure affichée dans Elements.

Le diagramme résume la relation entre les règles de correspondance dans Styles et la valeur finale dans Computed. Dans DevTools, ouvrez Computed et filtrez pour color afin d'inspecter la même valeur. Les panneaux peuvent apparaître à différents endroits selon la disposition et la version du navigateur.

Comparez Styles et Computed

Le panneau Styles affiche les règles qui correspondent à l'élément sélectionné, les styles en ligne écrits directement sur l'élément, et les règles liées à l'héritage. p { color: #666; } et .notice { color: #087f5b; } correspondent tous deux à la notice, mais la couleur finale du texte est verte. Cela est dû au fait que le sélecteur de classe a une spécificité plus élevée que le sélecteur d'élément dans la même condition d'origine/importance/couche dans cet exemple.

Si vous voyez un texte barré dans une déclaration de couleur grise, vérifiez d'abord la possibilité qu'il ne s'agisse pas de « la syntaxe était incorrecte » mais plutôt de « une autre déclaration a gagné ». La signification des textes barrés et des signes d'avertissement peut varier en fonction de l'emplacement et de la situation, donc survolez la déclaration avec votre souris et lisez l'explication. padding: 16px est une propriété distincte de color, donc même s'il y a un conflit de couleur, elles peuvent être appliquées ensemble.

Computed est utilisé pour vérifier le style final calculé pour l'élément sélectionné. Ouvrez l'onglet et entrez color dans le filtre pour trouver la couleur du texte. #087f5b peut s'afficher comme rgb(8, 127, 91), et ils sont de la même couleur. Développez une propriété pour suivre les règles et sources associées. Certaines propriétés peuvent être cachées dans la liste par défaut, vérifiez donc également les options d'affichage.

La documentation des fonctionnalités CSS de Chrome DevTools explique les panneaux et comment modifier les déclarations. Pour comprendre pourquoi les déclarations entrent en conflit, comparez les exemples conditionnels dans CSS Héritage, Spécificité et Cascade.

Activer/désactiver les déclarations et modifier les valeurs

1. Dans Styles, recherchez la déclaration color: #087f5b dans la règle .notice. Décocher la case à côté d'une déclaration n'exclura cette déclaration que temporairement. Par conséquent, confirmez que la couleur de l'avis change en gris pour la règle p.
2. Cochez à nouveau la case pour la ramener à sa couleur verte d'origine. Ensuite, cliquez sur la valeur de couleur et changez-la en #1d4ed8 et appuyez sur Entrée. Vérifiez que seul le texte dans l'avis change en bleu et que la couleur de fond reste vert clair.
3. Vérifiez à nouveau la couleur du texte dans Computed. Si elle indique rgb(29, 78, 216), elle correspond à la couleur bleue que vous avez modifiée. Le fond est une propriété distincte appelée background-color.
4. Cet exercice ne configure ni liaison avec les fichiers sources ni Local Overrides (remplacements locaux), donc lorsque vous actualisez, la couleur que vous avez modifiée dans les Outils de Développement disparaîtra et vous reviendrez à la couleur verte d'origine. Après avoir confirmé que l'original n'a pas été modifié, passez à l'étape suivante.

Les déclarations qui ont été effacées peuvent être restaurées en réactivant la case à cocher, et les valeurs modifiées incorrectement peuvent être restaurées en saisissant à nouveau les valeurs existantes. Si vous souhaitez supprimer toutes les autres modifications en une seule fois, actualisez sans activer la fonction de sauvegarde, comme dans cet exercice. Si vous avez activé le lien de l'espace de travail ou le remplacement local, la façon dont cela est sauvegardé et maintenu peut changer, donc ne supposez pas que cela sera restauré avec un actualisation.

Enregistrez une modification confirmée dans le fichier source

Cliquez sur le nom de fichier source et le numéro de ligne d'une règle dans Styles pour la localiser. Comme cet exemple intègre du CSS dans le HTML, modifiez la règle correspondante dans le index.html original. Pour une feuille de style externe, ouvrez le fichier identifié là-bas, tel que style.css. Vérifiez le chemin avant de modifier une copie portant un nom similaire. Pour plus de détails, voir Appliquer le CSS avec des styles en ligne, internes et externes.

1. Ouvrez le index.html que vous aviez réellement ouvert dans un éditeur de texte. Si vous avez copié le fichier dans plusieurs dossiers, assurez-vous que le chemin du fichier correspond à l'adresse du navigateur.
2. Changez la valeur de couleur de la règle originale .notice en #1d4ed8 et enregistrez.
3. Actualisez votre navigateur. Maintenant, si vous l’ouvrez à nouveau et que l’avis apparaît en bleu, il a été reflété dans l’original.
4. Pour revenir au design original après avoir terminé l’exercice, restaurez la couleur originale de #087f5b et enregistrez/actualisez.

Distinguez trois erreurs CSS courantes

Pour chaque situation, changez l'original un par un, enregistrez/rafraîchissez, vérifiez, puis revenez en arrière. Dans la première situation, les règles .notcie qui ne correspondent pas à l'élément sélectionné peuvent ne pas apparaître dans la liste des règles couramment appliquées de Styles. Dans la troisième situation, la façon dont l'avertissement apparaît varie selon l'endroit où il a été créé et la version du navigateur. En divisant les cas en cas où il n'y a pas de règle, il y a une règle mais elle a été écrasée, et la déclaration elle-même est invalide, vous pouvez voir où la corriger.