Comment déboguer CSS avec les outils de développement de votre navigateur

CSS n’est pas un langage de programmation. Pourtant, selon qui vous demandez, vous dira qu’écrire de bons CSS peut parfois être aussi difficile que d’écrire dans des langages de programmation comme Java ou JavaScript.

Dans cet article, je veux vous montrer quelques astuces pour déboguer des problèmes CSS pour les résoudre. En tant que bon développeur Web, vous devez vous familiariser avec les outils de développement de navigateurs (par exemple, Google Chrome) afin que nous les utilisions.

Mode filaire

Aux prises avec des problèmes de mise en page? Peut-être qu’un aspect plus filaire vous aidera à mieux comprendre votre mise en page. La règle CSS suivante fera en sorte que chaque élément ait un fond noir, une couleur de texte verte et une bordure rouge. Vous pouvez ajouter la règle dans votre feuille de style ou directement dans votre navigateur. Selon votre cas d’utilisation, vous pouvez même améliorer cette règle. N’oubliez pas de désactiver cela en production!

*{
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}

Propriétés de style calculées

Certains outils de développement de navigateurs (par ex. Chrome developer Tools) vous offrent une vue affichant les propriétés de style qui sont appliquées à un élément particulier. Ici, vous pouvez également voir pour chaque propriété de style où elle a été définie.

Tester les requêtes CSS directement dans votre navigateur

Sauf si vous n’insérez pas de styles, vous devez créer des blocs de déclaration CSS valides. Parfois, les sélecteurs CSS peuvent devenir compliqués à lire et à écrire. Un moyen rapide de vérifier si les sélecteurs CSS fonctionnent correctement consiste à effectuer une recherche directement dans les outils de développement de votre navigateur. Vous pouvez rechercher des sélecteurs de texte et CSS.

Basculement des états d’élément

Certains éléments comme les champs de saisie sont stylisés lorsqu’ils sont focalisés. D’autres éléments comme les boutons réagissent lorsque vous passez la souris dessus. La plupart des outils de développement de navigateur vous permettent de basculer des états d’éléments tels que le focus ou le survol. Cependant, si un écouteur DOM écoute cet événement, le basculement de l’état d’un élément ne lancera généralement pas d’événement qui serait enregistré par cet écouteur.

Conclusion

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.