Cross-Browser

Un article de Wikipédia, l'encyclopédie libre.
Cet article ou cette section doit être recyclé.
Une réorganisation et une clarification du contenu est nécessaire. Discutez des points à améliorer en page de discussion.

Le Cross-browser est la possibilité pour toute application web, sous format HTML ou programmée avec un langage de script s'exécutant côté client de supporter plusieurs navigateurs web.

Ce terme a été largement utilisé pendant la guerre des navigateurs à la fin des années 1990. A cette époque le terme se référait aux sites web ou aux bouts de codes qui fonctionnant à la fois sous Internet Explorer et Netscape Navigator. De nouvelles fonctionnalités ont depuis été ajoutées aux navigateurs, cependant, aucune coordination n'a été faite entre les éditeurs. Ainsi, il arrivait souvent que bien que deux navigateurs offrent la même fonctionnalité, ils aient un comportement différent lors de son exécution.

Le terme de Cross-browser est toujours utilisé, mais moins intensivement. Les principales raisons sont que :

  • Les dernières versions de Netscape et Internet Explorer supportent HTML 4.0 et CSS1, des extensions ne sont plus requises pour afficher correctement les graphismes.
  • Les scripts côté client sont maintenant écrites grâce au DOM du W3C.
  • Les sites web sont généralement écrits avec plus de rigueur pour être visibles dans tous les navigateurs : Mozilla Firefox, Opera et Safari, Internet Explorer et Netscape.

[modifier] Exemple de code cross-browser

Pour comprendre cet exemple, connaître les bases HTML et Javascript est nécessaire. Soit le bout de code suivant :

<div id="exemple" style="position : absolute; top : 100px; left : 100px;">Texte</div>

Ce code décrit un bloc de texte, qui doit être affiché à 100 pixels des bords haut et gauche de la fenêtre de navigation. Dans Netscape 4, il faut utiliser le code Javascript suivant pour le déplacer vers la droite :

document.layers['exemple'].left = 200;

Cependant dans Internet Explorer 4, le code Javascript est le suivant :

document.all['exemple'].style.left = 200;

Pour que ce code fonctionne dans les deux navigateurs, et ainsi être compatible cross-browser, il est nécessaire de le changer comme suit :

if (document.all)
  document.all['exemple'].style.left = 200;
else if (document.layers)
  document.layers['exemple'].left = 200;

Le code suivant, qui utilise la méthode DOM, fonctionne dans Mozilla, les dernières versions d'Internet Explorer, et d'autres navigateurs qui respectent le W3C :

document.getElementById('exemple').style.left = '200px';

[modifier] Liens externes