Avez-vous déjà appliqué du CSS à un élément, mais que cela ne fonctionnait pas ?
Avec les outils pour les développeurs Chrome, vous pouvez identifier 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 divers problèmes CSS:
Propriété dont la syntaxe est 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é manuscrite remplacéePropriété de style de tracé actif
feuille de style user-agent
- Propriété non modifiable
Propriété non modifiable remplacée
Autres conseils de débogage:
- Utilisez le filtre du panneau 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é et cliquez sur un lien pour trouver sa source dans le volet Styles.
Pour en savoir plus sur toutes les façons dont les outils de développement mettent en évidence les problèmes de CSS, consultez Rechercher des CSS non valides, ignorés, inactifs et autres.
Pour améliorer votre expertise en CSS, consultez Apprendre le CSS.
Pour savoir comment créer des sites Web qui sont à la fois esthétiques et fonctionnels pour tous les utilisateurs, consultez Apprendre le Responsive Design.