Déboguer une feuille de style

Une règle CSS peut sembler correcte dans votre fichier sans produire le résultat attendu dans la page. Une propriété mal orthographiée, une valeur invalide ou une autre règle prioritaire peuvent expliquer l’écart. Vous allez utiliser les outils du navigateur pour localiser le problème au lieu de modifier le CSS au hasard.

Les outils de développement sont intégrés aux navigateurs récents. Ouvrez la page de l’atelier de jardinage, puis faites un clic droit sur un élément concerné et choisissez l’option d’inspection. Vous pouvez aussi ouvrir les outils avec les raccourcis du navigateur. L’inspecteur affiche le HTML de la page et les règles CSS associées à l’élément sélectionné.

Inspecter les règles d’un élément

Sélectionnez, par exemple, le paragraphe de conseil dans la page. Dans le panneau des styles, repérez les règles associées à cet élément. Une déclaration barrée est présente dans une règle, mais n’est pas celle qui détermine la valeur finale : une autre déclaration l’emporte, ou bien la valeur est remplacée. Une déclaration signalée par un avertissement ou ignorée peut contenir une erreur de syntaxe ou une valeur que le navigateur ne reconnaît pas.

Le panneau des styles calculés indique les valeurs effectivement utilisées pour l’élément sélectionné. Si vous attendiez un texte vert mais que la valeur calculée est grise, remontez aux déclarations affichées dans le panneau des styles. Cette vérification vous permet de séparer deux cas : la règle n’est pas appliquée, ou elle l’est mais son résultat ne correspond pas à votre attente. Pour la cascade et la spécificité, reportez-vous à la leçon consacrée à ces notions.

Repérer une faute de syntaxe

Voici une règle qui contient deux erreurs : le nom de la propriété de couleur est mal écrit et la valeur de la marge n’est pas valide. L’inspecteur peut signaler ces déclarations comme invalides ou ne pas les inclure dans les styles calculés. Comparez le code avec la version corrigée, puis rechargez la page si vous avez modifié le fichier dans votre éditeur.

.conseil {
    colr: #315b3a;
    margin: large;
}

.conseil {
    color: #315b3a;
    margin: 1rem;
}

Une règle peut aussi être syntaxiquement correcte, mais ne pas correspondre à l’élément visé. Si vous avez sélectionné un élément et qu’aucune règle attendue n’apparaît, vérifiez que le nom de classe ou d’identifiant dans le fichier CSS correspond exactement à celui présent dans le HTML. Vérifiez également que la feuille style.css est bien chargée : une erreur dans son chemin empêche le navigateur de lire ses règles.

Suivre une démarche de diagnostic

Commencez par sélectionner l’élément dont le rendu pose problème. Vérifiez ensuite si la règle attendue apparaît, si ses déclarations sont valides et quelle valeur est calculée pour la propriété concernée. Si la règle manque, contrôlez le sélecteur et le chargement de la feuille ; si elle apparaît mais est barrée, examinez les autres règles qui définissent la même propriété.

Avancez une modification à la fois et observez son effet dans le navigateur. Si plusieurs propriétés changent simultanément, il devient plus difficile d’identifier celle qui a résolu le problème ou créé un nouvel écart. Une fois la correction confirmée, reportez-la dans votre fichier CSS et rechargez la page afin de contrôler le résultat réel, plutôt que la modification temporaire de l’inspecteur.

À retenir

• Inspectez l’élément concerné pour voir les règles CSS qui lui sont associées.
• Une déclaration barrée est supplantée ; une déclaration ignorée peut être invalide.
• Comparez les styles appliqués aux styles calculés pour trouver la valeur réellement utilisée.
• Vérifiez le sélecteur et le chargement de style.css si la règle attendue est absente.
• Testez une correction à la fois dans l’inspecteur, puis enregistrez-la dans le fichier CSS.