Astuces pour les outils de développement: identifier les problèmes de CSS

Sofia Emelianova
Sofia Emelianova

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:

  • Avertissement. Propriété avec une syntaxe incorrecte

  • Case à cocher. Propriété remplacée

  • Case à cocher. Propriété inactive InformationsAvec un indice.

  • Hérité de parent

    • Case à cocher. propriété héritée
    • Case à cocher. Propriété non héritée
  • Case à cocher. Propriété abrégée extensible Développer.

    • Case à cocher. Propriété de longue durée remplacée
    • Case à cocher. 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.