Dans le dernier article de ce module, nous examinons les principes du débogage des CSS, y compris l'exploration de la CSS appliquée à une page et autres outils pouvant vous aider à trouver des erreurs dans le code CSS.

 

Prérequis : Notions de base sur les ordinateurs, installation des logiciels de base, connaissances élémentaires sur la  gestion des fichiers et des notions de HTML (étude de Introduction au HTML) et une idée sur le fonctionnement des CSS.(voir les articles précédents de ce module.)
Objectif : Apprendre les  bases du débogage des CSS.

Tout comme pour le débogage du HTML, celui des CSS n'est pas vraiment un problème comparé au débogage de beaucoup d'autres types de code. Nous vous recommandons de (re)lire Déboguer n'est pas un problème avant de continuer.

CSS et débogage

Comme le HTML, les CSS sont permissives (lire Code permissif avant de continuer.) Dans le cas des CSS, si une déclaration est invalide (contient une erreur de syntaxe ou n'est pas prise en charge par le navigateur), le navigateur l'ignore complètement et passe à la suivante.

Si un sélecteur est invalide, il ne sélectionne rien et toute la règle ne fera rien — à nouveau, le navigateur passera à la règle suivante.

C'est formidable à bien des égards — dans la plupart des cas, le contenu sera montré aux utilisateurs, même si son style n'est pas tout à fait correct. Mais ce n'est pas très utile lorsque vous essayez de déboguer le problème et vous n'obtenez même pas de message d'erreur pour vous aider à le trouver. C'est encore plus embêtant quand le contenu n'est pas visible à l'utilisateur — un style critique n'est-il peut‑être pas appliqué, ce qui entraîne une mauvaise composition ?

Heureusement, des outils sont là pour vous aider. Voyons-les maintenant.

Inspection du DOM et de la CSS

De nos jours, tous les navigateurs Web fournissent des outils de développement conçus pour vous aider à inspecter et à comprendre les pages web. Parmi les divers outils fournis, deux sont disponibles dans tous les navigateurs : l'Inspecteur DOM et l'Éditeur de la CSS — ils sont disponibles dans Firefox dans Outils > Développement Web > Inspecteur. Nous avons déjà vu l'inspecteur DOM dans Déboguer le HTML, ainsi que sa façon de l'utiliser pour l'inspection du HTML. Ici, nous allons le revoir en association avec l'éditeur CSS ; nous examinerons la façon de les utiliser conjointement pour déboguer les problèmes des CSS.

Note : Dans l'exemple suivant, nous utilisons Firefox, mais tous les navigateurs fournissent le même type d'outils — quelques petites différences d'emplacement sont possibles. Lisez Qu'est qu'un outil de développement de navigateur ? pour en savoir plus sur la manière d'y accéder dans les divers navigateurs.

Ouvrez tout d'abord notre exemple de débogage de la CSS dans un nouvel onglet du navigateur. Si vous voulez résoudre les problèmes de code pour créer une version finie de l'exemple, nous vous conseillons de faire une copie des fichiers HTML et CSS et d'implémenter les correctifs localement.

C'est une page Web simple et claire sur une colonne avec un seul article :

Page web d'exemple souhaitée. Logo Firefox placé à droite, titre principal et corps de texte  visibles et bien placés.

Pour l'instant, cependant, c'est un peu le fouillis :

Page Web en mauvais état. Rubrique Mon article et logo Firefox mal placés, titre caché par la fenêtre : le tout reste petit et peu lisible.

Commençons par examiner la page avec la fonctionnalité Inspecteur. Dans Firefox, vous pouvez ouvrir l'inspecteur avec Cmd/Ctrl + Shift + I(ou en choisissant Outils > Développeur Web > Inspecteur dans le menu). Vous disposez alors d'un ensemble d'outils ouverts dans une fenêtre au bas du navigateur :

L'inspecteur Firefox en action.

Si vous cliquez sur un élément à l'intérieur de l'inspecteur DOM à gauche, l'éditeur de la CSS à droite se met à jour pour afficher toutes les règles de la CSS appliquées à cet élément. C'est vraiment utile, d'autant plus que toutes les propriétés invalides apparaissent avec une ligne à travers elles et un petit symbole d'avertissement à côté d'elles. Ceci vous sera utile ci-dessous !

Un gros plan de l'inspecteur de page Firefox, montrant l'inspecteur DOM à gauche, et l'éditeur de la CSS à droite. La CSS invalide est barré et a un symbole d'avertissement.

Note : Il y a aussi une case à cocher sur le côté de chaque propriété ; vous activez ou désactivez la propriété correspondante de la CSS en ôtant ou posant la coche. Cette fonctionnalité est très utile pour déterminer une possible cause d'erreur.

Apprentissage actif : trouver les erreurs !

Donc, connaissant les bases de l'outil, essayons de trouver les erreurs. Dans chaque cas, vous devriez essayer de cliquer sur l'élément où se trouve le défaut, pour voir à quoi ressemble le CSS appliqué.

  1. Les éléments <header> et <footer> sont supposés avoir un arrière‑plan en couleur, mais aucune couleur n'apparaît.
  2. L'élément <h1> de l'en‑tête et l'élément <p> du pied de page sont tous deux trop hauts dans la page — c'est particulièrement visible avec <h1>, pratiquement hors de l'écran ! Cliquez sur <h1> dans l'inspecteur puis en décochant les cases près des déclarations de la CSS dans le panneau des règles trouvez celle qui pose problème.
  3. L'élément <img> est supposé placé sur la droite pour laisser de la place à gauche pour le texte, mais ce n'est pas le cas  — il est au‑dessus du texte.
  4. Le texte dans la zone de contenu <main> est de bien trop petite taille — une taille de police plus grande devrait avoir été appliquée aux paragraphes et aux éléments de liste, mais il semblerait qu'elle n'ait été appliquée ni aux uns ni aux autres. Astuce : c'est un peu plus délicat, car le problème porte sur le sélecteur et non la propriété.  Vous devrez étudier le source pour cela — vous le verrez dans l'Éditeur de style dans les outils de développement de Firefox.

Si vous êtes bloqués, voyez le code source corrigé sur Github.

Validation des CSS

Nous avons déjà vu le Validateur HTML de W3C, mais il y a aussi un  Validateur de CSS disponible. Il fonctionne de la même façon ; il vous permet de valider une CSS à une URL donnée en téléversant un fichier local ou en entrant directement le CSS.

a visual of the CSS Validation Service mentioned and linked to nearby

Apprentissage actif : validation de notre CSS

Introduisons notre CSS dans le validateur pour voir ce qu'il en sort.

  1. Allez dans le service de validation des CSS Validation par entrée directe.
  2. Copiez le CSS erroné dans la zone de texte du service de validation.
  3. Pressez le bouton Check.

Vous obtenez la liste des erreurs. Seules deux sont renvoyées :

The validator results as they appear on the CSS validation service.

Ce sont des messages utiles, d'autant qu'ils mentionnent les numéros de ligne et le sélecteur en action dans chaque cas. Voyons comment les interpréter.

  • Property background-colour doesn't exist : teal — simple ; ceci dit que la propriété n'existe pas et ce qu'il convient de faire est clair.
  • Value Error : float attempt to find a semi-colon before the property name. add it — indique qu'un point‑virgule manque. En notant le numéro de ligne, il est facile de corriger l'oubli.

Vous pourriez dire que c'est moins utile que les outils de développement du navigateur — cela ne vous permet pas de voir le rendu du code tout en faisant référence à ce qui est incorrect et ni de trouver les cas où le sélecteur est incorrect ou bien la syntaxe correcte mais la valeur choisie pour la composition n'est pas bonne. Mais disons que pour une grande feuille de style, le validateur vaut la peine d'être exécuté pour se débarrasser de toutes les erreurs de syntaxe de base, avant de pratiquer les outils de développement du navigateur pour identifier d'autres problèmes.

Note : CSS Lint est un outil semblable pour la valisateion des CSS et la correction des erreurs, avec quelques astuces utiles et avertissements intéressants.

Résumé

Félicitations pour être arrivé au dernier article du premier module des CSS ! Maintenant tentez de réussir notre évaluation à propos des CSS, puis commencez à explorer d'autres modules sur les CSS et le HTML.

 

Dans ce module

 

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Dralyab
Dernière mise à jour par : Dralyab,