Compatibilité navigateur et prise de tête

Il y a quelques années encore, la sacro-sainte suprématie d'Internet Explorer reléguait cette pratique au rang de simple lubie passagère : « Adapter mon site ? Mais pour quoi faire, il passe très bien sous IE ! »
Depuis, la donne a changé : IE perd du terrain au profit d'autres navigateurs plus respectueux des standards dont l'utilisation se démocratise peu à peu. Du même coup, la compatibilité navigateur est devenue un atout non négligeable (voir quasi-indispensable) dont il serait dommage de se priver.

Définition

Lorsque l'on parle de compatibilité, on parle de rendu cohérent et uniforme d'un même site web quelque soit la station utilisée pour le consulter.
Il ne s'agit pas d'obtenir un rendu identique au pixel près sur tous les navigateurs... Loin de là ! D'ailleurs, il faut se rendre à l'évidence : c'est rigoureusement impossible, à moins de faire un site en Flash. On pourrait par exemple évoquer la différence de rendu d'une même taille de police sous Mac et PC pour illustrer le problème.

L'erreur la plus courante des clients pointilleux et des webmasters en herbe, consiste à ouvrir une même page dans différents navigateurs afin de traquer la moindre divergence de rendu, aussi infime soit-elle. Bien évidemment, le positionnement d'une puce qui change légèrement ou un espace un peu plus grand entre deux paragraphes saute alors aux yeux. Mais, uniquement parce que la comparaison est faite entre le navigateur de référence et le navigateur cible.
Il faut garder à l'esprit que le visiteur lambda visitera le site par le biais d'un seul navigateur et qu'il n'aura pas conscience de ces petites différences.

Méthodologie

Vous l'aurez compris, le but de la compatibilité navigateur est de coder un site de façon à ce que la mise en page globale et l'esprit graphique soit conservés. Et pour ce faire, il n'y a rien de bien compliqué à mettre en œuvre.

Il faut bien sûr avoir des notions de développement et connaître le rôle des éléments HTML car la première étape consiste à produire un code solide et propre qui utilise les balises à bon escient.
Avant de se lancer bille en tête dans le développement, il convient de choisir un navigateur de référence. Respectueux des standards, il affichera les éléments tels qu'ils devrait l'être partout. Personnellement, je me base sur Firefox, mais rien ne vous empêche de prendre Opéra par exemple, si vous préférez.

Vous voilà prêt à coder. Vérifiez de temps à autres le rendu obtenu sur votre référence, afin de vous éviter toute mauvaise surprise. Et, à chaque étape importante, allez jeter un œil sur les autres navigateurs, afin de vous assurer d'un rendu uniforme.
Certain préfèreront le faire à la fin du projet, mais il m'apparaît plus simple de gérer les différences de rendu au coup par coup qu'en fin de chaîne... Surtout que dans 95% des cas, ce sont les mêmes bugs qui interfèrent et que leur résolution est donc loin d'être très compliquée !

Quelques un des bugs les plus fréquents

Il ne faut pas se leurrer : en règle générale, le problème vient d'Internet Explorer (les versions 6 et inférieures, particulièrement). Heureusement, bon nombre d'erreurs de rendu sont connues et recensées, ce qui facilite grandement la tâche des développeurs.
En voici quelques uns :

La mauvaise gestion des PNG transparents

Problème : Internet Explorer est réputé pour ne pas supporter la transparence PNG, et afficher les images PNG transparentes avec un fond gris opaque particulièrement laid.
Solution : L'utilisation d'un filtre permet toutefois d'obtenir un résultat probant. La méthode à utiliser se trouve détaillée dans l'astuce Obtenir la transparence PNG avec Internet Explorer 6.

Le doubled margin bug

Problème : Comme son nom l'indique, il double la taille de la marge appliquée à gauche ou à droite d'un élément flottant quand cet élément est déplacé à partir de la bordure du conteneur.
Solution : Ajouter display: inline; a l'élément flottant concerné.

Le three pixel gap

Problème : Un saut incompressible de 3 pixel apparaît lorsqu'un élément (doté du layout) est placé dans le flux directement après un élément flottant.
Solution : Aucune solution n'ayant pour l'instant été trouvée pour supprimer le layout, il est conseillé de passer par les commentaires conditionnels afin de corriger le problème.

Le layout

Problème : Le layout est un concept d'IE qui détermine comment les éléments interagissent entre eux. Responsable d'erreurs de rendu diverses et variées, il est recommandé d'y faire particulièrement attention.
Plus d'informations : sur le blog de Laurent Denis IE Windows, layout et bugs de rendus CSS, ou dans l'article hasLayout et Internet Explorer.

Vous avez dit "prise de tête" ?

En conclusion, vous l'aurez compris, il n'y a vraiment rien d'insurmontable pour rendre un site compatible : il s'agit plus de bonne volonté, de méthodologie et d'un peu d'huile de coude que d'autre chose.
Et puis... Si jamais vous avez un problème, n'hésitez pas à demander un coup de main. ;)

Liens utiles

• Téléchargement d'IE (version 3 à 6)
• Téléchargement d'IE 7 standalone
• Téléchargement d'Opéra
• Téléchargement de Firefox
• Téléchargement de Safari
• Et pour aller plus loin : Installer différents navigateurs pour tester vos pages