Méthodologie pour résoudre les problèmes d'affichage en CSS
Suite au billet qui présentait un récapitulatif des moyens pour faire un site compatible sur tous les navigateurs actuels, voici à présent une petite méthodologie pour résoudre rapidement une grande partie des bugs d'affichage pouvant survenir avec les mises en page en CSS. Cette méthodologie se veut concise et se résume en trois étapes : isoler (le ou) les éléments problématiques, identifier l'erreur, et enfin, résoudre le bug.
Isoler l'élément problématique
Un bug d'affichage est dû en général à des incompatibilités de navigateurs ou des marges (margin, padding) par défaut différentes selon les navigateurs.
La première étape à suivre est d'isoler l'élément ou les éléments qui ne se comportent pas comme vous l'aviez prévu.
Pour cela, nous allons utiliser deux techniques différentes grâce aux styles CSS : l'ajout de bordures colorées, de couleur d'arrière plan et le masquage des éléments un par un.
Ajout de bordures colorées
Actuellement, la très grande majorité des sites web est structurée à l'aide des balises <div>, <table>, <hn>, <p> et <ul>.
Les CSS offrent un moyen très simple d'isoler ces différentes balises de bloc : en leur appliquant une bordure colorée, vous bénéficierez immédiatement d'un visuel global de la structure de votre mise en page, sans toucher au contenu ni au code HTML.
En commençant votre feuille de style avec une partie ou toutes les déclarations suivantes vous aurez un aperçu de l'espace exact occupé par chacune des balises. Les tables et cellules seront entourées de noir et gris, les <div> en orange, les éléments de titre ou de paragraphes auront une bordure jaune, etc.
Ceci permettra très rapidement de mettre le doigt sur des décalages ou des erreurs d'affichage concernant l'un ou l'autre de ces éléments.
table {border: 1px solid black}
td {border: 1px dotted gray}
div {border: 1px solid orange}
img, form {border: 1px dashed blue}
h1, h2, h3, h4, h5, h6, p {border: 1px solid yellow}
ul {border: 1px solid green}
li {border: 1px solid lightgreen}
etc.
Signalons que cette technique, comme beaucoup d'autres, peut se réaliser instantanément grâce à l'extension Webdevelopper sur Firefox.
Ajout de couleur de fond
Cette étape permet de localiser les éventuels problèmes de fusion de marges. C'est un phénomène qui s'applique lorsque deux éléments de type bloc sont placés selon le flux normal, l'un sous l'autre. Dans ce cas, les marges hautes et basses fusionnent : la largeur de la marge finale devient la valeur la plus grande entre celles des marges adjacentes... ce qui peut poser certains problèmes de décalages verticaux.
Afin de déterminer ce genre de problèmes, il est conseillé de coloriser l'ensemble des éléments en leur appliquant une couleur d'arrière plan.
Notez que cette technique va se révéler fastidieuse car il sera nécéssaire de colorer chacun des éléments (div#top, ul#menu, etc.) et non des ensembles (<div>, <ul>) comme dans la méthode des bordures colorées :
ul#menu {background-color: green}
ul#menu li {background-color: lightgreen}
div#header {background-color: yellow}
etc.
Masquer les éléments un par un
Parfois, il ne suffit pas de distinguer l'élément pour comprendre le problème posé. Il se peut que l'élément provoque des décalages ou autres influences.
Dans le même ordre d'idée que la technique précédente, il peut être intéressant de masquer chaque élément un par un pour déterminer avec certitude lequel est en cause.
Pour cela, appliquons un display none successivement sur chaque élément (nommé en général par un id ou une classe).
Cette procédure sera certainement longue car nécessite un tâtonnement au cas par cas, mais peut se révéler efficace.
balise {display: none;}
etc.
Suppression de toutes les marges
Toutes les balises bloc (sauf <div>) possèdent des marges internes (padding) et externes (margin) par défaut.
Le problème est que cette valeur par défaut est différente d'un navigateur à l'autre et provoquera un rendu différent sur chaque navigateur.
Il s'agit certainement de l'explication la plus courante lorsque des décalages apparaissent entre les différentes plateformes.
Le meilleur moyen d'identifier un problème de marges sur certains éléments est de... supprimer toutes les marges de tous les éléments.
Le principe est d'utiliser le sélecteur universel (*), qui s'appliquera à toutes les balises, et d'y mettre les marges à zéro :
* {margin: 0; padding: 0;}
Commencez votre feuille de style par cette déclaration. Si les décalages involontaires disparaissent, vous aurez détecté un problème de marges par défaut. A vous ensuite d'isoler l'élément qui provoque ce décalage.
Notez qu'une discussion sur l'usage de ce sélecteur universel a été ouverte sur le forum Alsa.
Identifier l'erreur
A présent que les balises concernées sont isolées, la deuxième étape est de cerner quel est le problème posé par ces balises.
Soumission aux Validateurs
Souvent, des erreurs proviennent de la "grammaire" et de la conception même du document. Soumettre sa page aux différents Validateurs est une phase nécessaire pour détecter ces problèmes.
Passez sur le validateur (X)HTML et le validateur CSS pour cerner ces erreurs et y remédier.
Résoudre le problème
Le plus dur est fait : l'erreur est identifiée et les éléments concernés sont isolés.
A ce stade, les solutions sont souvent nombreuses. La plupart sont décrites sur cet article traitant des problèmes de compatibilité entre navigateurs.
Revenons sur les problèmes et solutions les plus fréquentes :
Modèle de boîte
Chaque élément possède des dimensions, des bordures, des marges internes (padding) et externes (margin). C'est le Modèle de boîte. Cependant, Internet Explorer se fonde sur un modèle personnel différent des autres, ce qui pose des problèmes de dimensions.
Les liens suivants vous donneront des explications et solutions à ce problème.
Positionnements et valeurs problématiques
Certains schémas de positionnement sont paradoxaux et ne peuvent s'appliquer en même temps.
Pas de solution mirace, il faut pour y remédier comprendre parfaitement les différentes formes de positionnement en CSS :
Des soucis d'un autre ordre peuvent provenir lorsque des valeurs en em ou en poucentage sont employées.
Pour le premier cas, sachez que ces unités relatives sont héritées et se réfèrent à la taille du parent.
Dans le second cas, un problème courant est celui de l'obtention d'une hauteur égale à 100% de la page.
Parentés interdites
Pour finir cette méthodologie rapide, notons que certains problèmes peuvent survenir d'une mauvaise imbrication de balises.
Vous savez que les balises se distinguent globalement en deux groupes : les éléments bloc et les élements en-ligne. Chacun des groupes a ses spécificités et les en-ligne ne peuvent pas contenir de balises de type bloc.
Mais il faut savoir qu'il existe des exceptions à cette règle de base. Connaître ces exceptions permettra de comprendre certaines erreurs des validateurs et certains défauts de mise en page.
Par Raphael GOETTER - mercredi 8 décembre 2004 à 11:08
Astuces - #100 - Lu 44167 fois - Intérêt du billet: 2.89(63) - Fil RSS
Trackbacks
Aucun trackback pour le moment.
Les trackbacks pour ce billet sont fermés.
Evaluez ce billet
Commentaires
Le mercredi 8 décembre 2004 à 13:01, par solo :: site :: #
Le mercredi 8 décembre 2004 à 13:29, par RNB :: #
Le mercredi 8 décembre 2004 à 13:35, par Raphael :: #
Le mercredi 8 décembre 2004 à 13:43, par Shemu :: site :: #
Le mercredi 8 décembre 2004 à 15:15, par Talou :: site :: #
Le mercredi 8 décembre 2004 à 15:47, par Xavier :: site :: #
Le mercredi 8 décembre 2004 à 16:09, par ElMoustiko :: site :: #
Le mercredi 8 décembre 2004 à 16:15, par Xavier :: site :: #
Le mercredi 8 décembre 2004 à 16:27, par Raphael :: #
Le mercredi 8 décembre 2004 à 17:18, par Xavier :: site :: #
Le mercredi 8 décembre 2004 à 18:18, par pablo :: #
Le mercredi 8 décembre 2004 à 18:56, par Raphael :: #
Le samedi 11 décembre 2004 à 21:33, par hum :: site :: #
Le samedi 11 décembre 2004 à 21:50, par Raphael :: #
Le samedi 22 janvier 2005 à 13:17, par blastmanu :: site :: #
Le samedi 22 janvier 2005 à 13:32, par Raphael :: site :: #
Le dimanche 23 janvier 2005 à 00:19, par Stephan :: #
Le lundi 4 avril 2005 à 09:27, par hikaru :: #
Le vendredi 29 avril 2005 à 17:38, par Andre-d :: #
Le jeudi 30 juin 2005 à 15:26, par otterman :: site :: #
Le vendredi 15 juillet 2005 à 16:47, par camacho :: site :: #
Ajouter un commentaire
Les commentaires pour ce billet sont fermés.