Exercice 6.5 · 7 min · 0 tentative
Enquête avec F12
🎯 Objectif
Apprendre le réflexe de dépannage des pros : quand un style déraille, l'inspecteur te montre qui gagne, qui perd — et où frapper.
📖 Exemple
Sur un vrai site, tu ne relis pas mille lignes de CSS à la main. Tu ouvres l'inspecteur — F12 ou clic droit → Inspecter — tu cliques l'élément malade, et le panneau Styles déballe tout :
Tout y est :
- chaque règle qui vise l'élément, de la gagnante aux battues
- les règles perdantes barrées — battues par le poids ou par l'ordre
- le fichier et la ligne de chaque règle, pour foncer corriger au bon endroit
Sur la capture, le drame est lisible d'un coup d'œil : deux règles de même poids visent le <h1>, la dernière écrite a gagné... et c'est la mauvaise. Le titre s'affiche jaune pâle sur blanc — invisible.
📝 Consigne
Justement : la gazette du club a perdu son titre. Il est bien dans le HTML, mais l'écran le noie. Mène l'enquête dans la feuille :
- Observe l'aperçu : le titre est là... écrit en jaune pâle sur fond blanc
- Trouve la règle fautive — indice : à poids égal, la dernière écrite gagne, alors regarde en bas
- Supprime-la en entier, commentaire du test compris : le titre doit retomber sur son vert foncé
- Ne touche à rien d'autre : paragraphes et signature sont innocents
Résultat attendu
Le titre « Gazette du club » réapparaît en vert foncé, le reste ne bouge pas d'un poil. Un code mort supprimé, une cascade assainie : enquête bouclée.
Ce qui est vérifié
- Rendre le titre à nouveau lisible (darkgreen)
- Supprimer la règle fautive, pas la contourner
- Garder les paragraphes gris
- Garder le pied de gazette en gris ardoise
- Écrire un code HTML bien formé
- Respecter la structure de la page (doctype, head, body)