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

Sofia Emelianova
Sofia Emelianova

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:

  • Avertissement. Propriété dont la syntaxe est incorrecte

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

  • Case à cocher. Propriété inactive Informations.Avec 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éveloppez.

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