Déboguer CSS - introduction

Les mises en page avec CSS donnent parfois des résultats inattendus.

La compatibilité entre navigateurs n'est pas toujours garantie. Il est donc indispensable de vérifier que l'HTML est valide et correspond à ce qu'on souhaite dire.

Le meilleur moyen de ne pas avoir à tout recommencer, c'est d'utiliser un DOCTYPE complet pour être en mode "Standards Compliance", de programmer pour Firefox ou Opera et de vérifier si tout va bien avec MSIE. Quand les problèmes avec MSIE ne sont pas trop graves, on peut les traiter ensuite.

Une fois la validation de l'HTML effectuée à l'aide de HTML Tidy ou du service en ligne du W3C, il faut effectuer la validation de CSS à l'aide du service en ligne du W3C ou d'une extension de Mozilla.

S'il reste quelques défauts avec un navigateur ou un autre, quelques outils vont permettre de trouver une solution acceptable.

Trois étapes donc illustrées par un exemple :

  1.  valider HTML 
  2.  valider CSS 
  3.  Déboguer 

Les autres exemples ne détaillent que la dernière étape pour Internet Explorer ou pour l'ensemble des navigateurs.

Les problèmes les plus fréquents sont des positionnements différents, des marges en trop, des divisions qui se déplacent, du texte qui apparaît ou qui disparaît, des espaces indésirables, des désastres quand la résolution ou la taille du texte change, des divisions qui n'entourent pas les éléments qu'elles contiennent...

Les noms des bugs les plus courants sont : the whitespace bug, the peekaboo bug, the double-margin bug, the duplicate content bug, guillotine bug, multiple class hyphen bug, disappearing list-background bug, line-height bug, unscrollable content bug, three pixel text jog, bugs avec les pseudo-éléments...

Viennent s'ajouter les problèmes d'affichages liés aux erreurs d'arrondis et interprétations des spécifications : height/min-height, min-width, max-width, position...

Restent les limitations dues au fait qu'une partie des spécifications ne sont pas mises en place pour un navigateur ou un autre.

Nous avons donc deux types de problèmes : ceux qui sont spécifiques à Internet Explorer et ceux qui peuvent affecter n'importe quel navigateur.

Quelques exemples de bugs et l'utilisation d'outils pour localiser le problème et tenter de le régler complètent cette page.