4 techniques simples pour déboguer et corriger rapidement votre code CSS dans presque tous les navigateurs

4 techniques simples pour déboguer et corriger rapidement votre code CSS dans presque tous les navigateurs

Vous avez conçu la mise en page parfaite pour votre nouveau site Web et votre prochain site Web. Mais maintenant, convertir tout ce beau fichier en couches Photoshop PSD en un code parfait au pixel est la partie difficile. Ce n’est pas difficile parce que vous ne savez pas coder, mais plus difficile parce que différents navigateurs rendent votre code différemment, même lorsque vous utilisez un code CSS complètement valide pour afficher le code HTML5 sémantique génial que vous avez écrit. C’est encore plus frustrant lorsque la correction d’un bogue dans un navigateur devient maintenant un nouveau bogue dans un autre navigateur. Même si ce n’est pas difficile, imaginez maintenant que vous êtes chargé de corriger le code de quelqu’un d’autre qui est partout. Souvent, ce dernier cas est celui qui vous fait vous tirer les cheveux et dire de nombreux WTF avant de comprendre complètement ce qui se passe dans leur code, car vous connaissez probablement toute votre feuille de style par cœur et ce nouveau code n’est pas proche d’une convention de codage. Cependant, le moment de se salir avec le débogage de ce code CSS est beaucoup plus simple et moins frustrant qu’auparavant, grâce à ces outils et techniques très simples.

1) Outil d’inspection de l’élément

Inspecter l’élément est de loin le meilleur outil pour commencer à déboguer quoi que ce soit de CSS. Si vous développez des sites Web, vous avez besoin du bon ensemble d’outils de développement Web. Et heureusement, Inspect Element est désormais intégré nativement à tous les navigateurs Web modernes dans le cadre de leurs outils de développement. Cet outil vous permet de sélectionner l’élément spécifique de la page que vous souhaitez corriger et de voir immédiatement quelles règles CSS sont appliquées à cet élément qui font que votre élément sélectionné s’affiche de cette façon. Il vous suffit de cliquer avec le bouton droit de la souris et de sélectionner « Inspecter l’élément » dans le menu contextuel.

Vous avez maintenant un accès visuel complet à toutes les règles calculées pour cet élément. Si vous n’avez pas sélectionné le bon élément, vous pouvez simplement cliquer sur la source et épingler l’élément exact que vous souhaitez diagnostiquer. Comme vous le voyez dans la capture d’écran ci-dessus, vous pouvez maintenant modifier vos règles CSS. En utilisant la case à cocher sur le côté gauche de chaque propriété CSS, vous pouvez basculer cette propriété, ou même cliquer sur la propriété et modifier sa valeur, ou même appuyer sur la touche entrée et ajouter de nouvelles règles pour votre élément. Le plus étonnant est la facilité avec laquelle il est possible de déboguer un état de survol d’un élément en ouvrant simplement le menu déroulant à côté de l’élément sélectionné et en choisissant: état de survol. Comme vous pouvez le voir dans le panneau de droite, cet outil étonnant vous montre même le fichier de feuille de style et le numéro de ligne de la règle CSS en cours d’exécution dans cette page. De plus, il est plus compréhensible de comprendre pourquoi notre élément a un rembourrage supérieur et inférieur de 10 pixels au lieu de 5 pixels, car la règle à la ligne 1026 de style.css de notre requête multimédia CSS remplace l’ancienne règle à la ligne 916 du même fichier. Il est même possible de voir le modèle de boîte de l’élément sélectionné avec ses dimensions actuelles sans utiliser de règle ou d’outil de mesure tiers. Avoir cette mine d’informations rend désormais notre travail de débogage beaucoup plus facile. Supposons que votre champ de formulaire de courrier électronique de feuille de style ne soit pas similaire aux autres éléments de saisie et vous vous demandez comment vous pourriez résoudre ce problème. Vous inspectez cet élément et découvrez que parce que vous utilisez les nouveaux types de champs de saisie HTML5, votre concepteur de thèmes n’a inclus aucune règle CSS pour input, vous ajoutez donc ce sélecteur à la feuille de style.

input,input{ border: 1px solid #ccc;}

Google Chrome dispose également d’outils de développement similaires qui permettent les mêmes fonctionnalités. Il est même possible de changer votre mode de débogage pour la résolution d’écran d’un périphérique que vous souhaitez tester votre mise en page et savoir comment se comporte votre CSS media queries dans ces conditions.

Ces outils de développement ont des capacités très puissantes, même au-delà du développement CSS, telles que l’inspection DOM, le profilage JavaScript, la console JavaScript, les outils de surveillance des ressources et tout autre ensemble de fonctionnalités qui nécessitent leur propre section de tutoriel au-delà de cet article. Comme vous pouvez le voir sur l’image ci-dessus, dans les outils de développement Chrome, il est même possible d’émuler différents agents utilisateur du navigateur, ou même d’émuler des événements tactiles tels que le balayage. Avec ces outils, vous n’avez même pas besoin de déboguer activement votre CSS dans le navigateur mobile de votre smartphone, du moins dans une certaine mesure.

Quels outils de développement du navigateur sont les meilleurs sont des questions que vous découvrirez en expérimentant. À la fin de la journée, tout dépend de ce que vous essayez d’atteindre et si cet ensemble d’outils vous permet d’atteindre votre objectif final. Personnellement, j’utilise tous ces outils à mon avantage. Chacun a quelque chose que j’aime et trouve utile lorsque je veux déboguer mon code. Par exemple, je trouve la petite représentation des couleurs carrées des couleurs hexadécimales à côté des propriétés de couleur CSS utile, même si je peux traiter la couleur RVB dans ma tête et obtenir une visualisation approximative du palais des couleurs, ces petites différences me font alterner entre ces outils de développement.

Firebug

Firebug a été l’un des premiers outils à fournir une fonctionnalité d’inspecteur. C’est l’un des outils de développement Web les plus populaires, avec près de 3 millions d’utilisateurs quotidiens moyens. Au moment d’écrire ces lignes, les outils de débogage CSS de Firefox sont suffisamment adéquats pour que je n’utilise pas Firebug, mais pour le débogage JavaScript dans Firefox, j’utilise toujours Firebug.

Peur d’IE7? Ne sois plus

Vous pourriez être surpris, mais Internet Explorer a même une fonction d’inspection de l’élément (Ctrl + B) dans leurs outils de développement (F12). Bien qu’elle ne soit pas aussi conviviale que les outils de développement des autres navigateurs, cette fonctionnalité intégrée à Internet Explorer 9 est très utile pour tester vos mises en page en mode émulé IE7 et IE8. À l’époque où aucun de ces outils de développement n’était disponible pour déboguer les anciens navigateurs IE, cette deuxième technique était généralement très pratique.

2) Déboguez dans le style

Aussi bon que soit l’élément Inspect, vous n’avez parfois pas accès à cet outil, tel que les navigateurs mobiles, ou vous souhaitez ajuster le style de quelques éléments de la page au lieu d’un seul élément spécifique. J’aime connaître les limites de l’élément que je coiffe, donc je sais s’il y a des débordements, ou des problèmes flottants, ou etc For Pour cette raison, j’ajoute une couleur d’arrière-plan brillante et perceptible à l’élément actif que je coiffe et retire la couleur d’arrière-plan une fois le style terminé. Parfois, je vais et viens ajuster ces éléments, donc je déplace simplement le code de débogage à la fin de ma feuille de style et je le commente, et je le décommente une fois que j’en ai à nouveau besoin. De cette façon, je peux rapidement basculer en mode de débogage et voir comment chaque élément est positionné à l’écran.

Ce qui se traduit par …

Pour cet exemple, je viens d’ajouter du code de débogage aux éléments de bloc de structure principaux de ma page. Maintenant, je peux dire où commence chaque publication et combien d’écart il y a entre chaque publication ou élément de widget dans ma barre latérale, et si je veux ajouter un écart entre la barre latérale et le contenu principal, je peux le voir visuellement dans des couleurs vives.

Le contraire est également possible, en définissant une série de règles de débogage et en ajoutant cette classe à l’élément que nous voulons voir. Par exemple, ci-dessus, j’ai défini une nouvelle classe appelée debug avec le code suivant.

.debug{ border:1px solid red; }

et chaque fois que je veux déboguer un élément, j’ajoute simplement une classe de débogage à cet élément.

<div class="foo debug">Div element with foo and debug classes</div>

3) Déboguer CSS en utilisant JavaScript

Cette technique est très similaire à celle ci-dessus, mais parfois pour des raisons étranges, il arrive que la situation ci-dessus ne soit pas réalisable. C’est un morceau de code jQuery qui vient à notre aide en appliquant la classe de débogage à l’élément foo, ou même en ajoutant du CSS directement à l’élément bar dans ce cas.

$(document).ready(function(){ $('.foo').addClass('debug'); $('.bar').css('border' : '1px solid blue'); });

Cette situation peut arriver très rarement, mais je sais que j’ai utilisé cette technique dans le passé, donc c’est bon à savoir.

4) Apprenez à connaître la cascade

Certains problèmes CSS sont si courants comme les flotteurs de compensation que vous tomberez dans ce piège une fois, et la prochaine fois que vous rencontrerez quelque chose de similaire, vous savez ce qui a causé le problème et comment le résoudre. En général, la plupart des problèmes CSS sont faciles à résoudre si vous savez comment les règles CSS se substituent les unes aux autres. Par exemple, les sélecteurs plus spécifiques remplaceront les sélecteurs plus généraux, ou le sélecteur d’ID remplace le sélecteur de classe, ou la déclaration !important a priorité sur une déclaration normale. Apprendre à connaître la Cascade vous aidera à résoudre plus rapidement le code de vos feuilles de style en cascade.

Voici un exemple tiré directement des spécifications du W3C sur le fonctionnement de la spécificité du sélecteur.

Quelques exemples:

<HEAD><STYLE type="text/css"> #x97z { color: red }</STYLE></HEAD><BODY><P ID=x97z style="color: green"></BODY>

Dans l’exemple ci-dessus, la couleur de l’élément P serait verte. La déclaration dans l’attribut « style » remplacera celle de l’élément STYLE en raison de la règle 3 en cascade, car elle a une spécificité plus élevée. Si vous pensez que cet exemple est difficile à comprendre, consultez cet article sur l’ordre de priorité CSS.

Notes finales

Il est difficile d’obtenir des résultats parfaits en pixels en raison de rendus différents par différents navigateurs. Certains anciens navigateurs ne prennent pas en charge CSS3 ou HTML5 complets, alors vérifiez HTML5VEUILLEZ le projet communautaire pour voir si la syntaxe que vous essayez d’utiliser est prise en charge par la majorité des navigateurs. Cependant, vous pouvez éventuellement utiliser des fallbacks ou des polyfills pour fournir des fonctionnalités manquantes pour les navigateurs qui ne prennent pas en charge l’implémentation complète de CSS3 ou HTML5.

Laisser un commentaire

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