12 octobre 2011
publié par 
Les navigateurs pour afficher une page doivent représenter sous forme graphique, ce qui est à la base un texte HTML regroupant :
  • le contenu de la page à afficher,
  • des balises de mise en forme et de positionnement,
  • des liens vers les images de la page, les traitements javascript, les styles.
Cette analyse des balises, récupération des dépendances, et affichage de l'ensemble recomposé est prise en change par le moteur de rendu inclus dans chaque navigateur.

Comme tous les navigateurs ne disposent pas du même moteur de rendu, on peut donc avoir une même page, un même code HTML, affichée de façon sensiblement différente d'un navigateur à l'autre. De façon quasi systématique le résultat est identique sous Chrome et Safari, qui partagent un même moteur de rendu WebKit. Mais Internet Explorer pourra montrer des différences car il utilise son propre moteur de rendu. Un même navigateur peut également suivant sa version ou sa configuration ne pas utiliser le même moteur de rendu. Entre les versions 6 et 8 par exemple de Internet Explorer, il y a de très nombreuses différences, tout comme entre les versions 8 et 9.

Pour la majeure partie des pages, le résultat de l'affichage est strictement le même quelque soit le navigateur. Pour cela :
  • le langage HTML est suffisamment standardisé pour que les moteurs de rendu soient de plus en plus précis au fil des versions,
  • la génération des pages par WEBDEV prend en compte de nombreuses différences entre les navigateurs afin d'adapter dynamiquement la page lorsque cela est nécessaire.

Cependant les possibilités de création de pages étant sans limite, le générateur de pages de WEBDEV et/ou le moteur de rendu des navigateurs peuvent en de rares occasions être pris en défaut (un champ se décale un peu, l'application d'un style n'est pas celle attendue...).

Voici quelques astuces qui permettent de supprimer la majeure partie des risques d'avoir des différences d'affichage suivant le navigateur :
  • éviter pour la présentation les superpositions de champs en les regroupant dans des cellules,
  • utiliser le positionnement relatif des cellules plutôt que des déplacements programmés de champs,
  • bien ajuster les champs dans les cellules, sans laisser de zone hachurée,
  • supprimer toutes les superpositions invalides (menu "Affichage...Zone de superposition invalide" de l'éditeur de pages),
  • aligner les champs afin de simplifier la table de positionnement (Ctrl+u dans l'éditeur de pages permet de la visualiser),
  • alterner les tests entre les navigateurs, en utilisant le menu du bouton Go de l'éditeur de pages,
  • utiliser des modèles pour regrouper les éléments d'interface, afin d'avoir une mise à jour de l'ensemble du site par simple mise à jour du modèle,
  • pour la mise en forme effectuée directement dans un champ ou libellé HTML, vérifier les polices et familles de police utilisées. D'un navigateur à l'autre, une partie de texte en "arial" n'aura pas le même rendu qu'en (Arial, Helvetica, sans-serif).
  • "faire simple" en gardant toujours à l'esprit qu'un page n'est qu'un simple document texte avec des balises. Même dans leurs versions les plus récentes, les navigateurs seront plus facilement pris en défaut si la page a été conçue comme s'il s'agissait d'une fenêtre d'une application pour Windows. Une interface avec 10 volets dans un onglet, 20 tables et des milliers d'enregistrements sont à réserver à une fenêtre d'une application sous Windows, pas à une unique page Web. Le "piège" peut être de tenter de reproduire une application sous Windows, sous la forme d'un site Web. Parcourir à titre d'exemple les différents sites de Google, permet de bien se représenter l'ergonomie à donner aux pages pour obtenir une navigation fluide, ne pouvant pas demander trop aux navigateurs.

Si malgré ces recommandations une page d'un de vos sites WEBDEV n'est pas affichée de la même façon avec un navigateur donné, il suffit de montrer le cas au Support Technique Gratuit via le menu "? ... Requête au Support Technique", en joignant dans une archive zip :
  • une page .wwh de démonstration et ses éventuelles dépendances (images...),
  • des copies d'écran comparatives entre deux navigateurs,
  • le détail des navigateurs utilisés (éditeurs, versions exactes).
Il est alors possible, si besoin par une expertise de l'équipe Développement, de déterminer le cas précis afin de rechercher la solution la plus adaptée. Par exemple Internet Explorer 9 dispose de modes de compatibilité, bien des effets qui lui sont propres peuvent être supprimés par une balise spécifique de type <meta http-equiv="X-UA-Compatible" content="IE=9"> (balise ajoutée dans le volet "avancé" de la description de la page).

< Retour