Cross-Browser

Un article de Wikipédia, l'encyclopédie libre.
Aller à : navigation, rechercher

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.

À cette époque le terme se référait aux sites web ou aux bouts de codes fonctionnant à la fois sous Internet Explorer et Netscape Navigator. Durant ces années, de nouvelles fonctionnalités ont é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 beaucoup moins utilisé de nos jours, principalement grâce aux faits suivants :

  • Les dernières versions de Netscape et Internet Explorer supportent HTML 4.0 et CSS1.
  • 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 les principaux navigateurs web.

Exemple de code cross-browser[modifier | modifier le code]

Afin comprendre cet exemple, il est nécessaire de connaître quelques bases d'HTML et de JavaScript. 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, 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;

De nos jours, il est possible d'écrire 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 les standards du W3C :

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

Liens externes[modifier | modifier le code]