Avez-vous déjà appliqué du code CSS à un élément, mais il ne fonctionne tout simplement pas ?
Avec les outils pour les développeurs Chrome, vous pouvez détecter les problèmes CSS en un coup d'œil, les déboguer et les tester.
Regardez la vidéo pour découvrir comment le volet Éléments > Styles met en évidence différents problèmes CSS:
Propriété avec une syntaxe incorrectePropriété remplacéePropriété inactive
Hérité de
parent
- propriété héritée
- Propriété non héritée
Propriété abrégée extensible
-
Propriété de longue durée remplacée - Propriété de long terme en activité
-
feuille de style user-agent
- Propriété non modifiable
Propriété non modifiable remplacée
Autres conseils de débogage:
- Utilisez le filtre du volet Styles pour vous concentrer sur la propriété qui vous intéresse.
- Utilisez le volet Calculé pour afficher tous les gagnants de la Cascade et leurs valeurs calculées.
- Dans le volet Calculé, développez une propriété, puis cliquez sur un lien pour trouver sa source dans le volet Styles.
Pour en savoir plus sur la manière dont les outils de développement mettent en évidence les problèmes CSS, consultez Rechercher les éléments CSS non valides, remplacés, inactifs et autres.
Pour améliorer votre expertise en matière de CSS, consultez la page Apprendre les CSS.
Pour savoir comment créer des sites Web attrayants et adaptés à tous, consultez la page Apprendre le responsive design.