La compatibilité multi-navigateur

Un des principaux problèmes en matière d’intégration web s’avère être la compatibilité multi-navigateur. En d’autres termes, cela signifie avoir le même rendu graphique quelque soit le navigateur que l’on utilise.

Pour contourner ce problème, deux solutions peuvent être exploitées, à savoir:

• Utiliser les hack CSS
• Charger une feuille de styles spécifique en fonction du navigateur utilisé

Les hack CSS

Différents hack existent qui peuvent, dans la plupart des cas, répondre aux besoins de l’intégrateur html.

Les principaux navigateurs, ou plutôt LE principal navigateur posant problème est Internet Explorer. En intégrant vos pages dans le respect des standards du W3C, 99 fois sur 100, la mise en page sera celle désirée sur un navigateur tel que Mozilla Firefox.

En revanche, Internet Explorer ne suivra pas la cadence … Et encore moins pour ce qu’il s’agit d’Internet Explorer 6, la bête noire des intégrateurs.

En effet, ce navigateur étant obsolète, l’intégration des pages HTML se révèle bien souvent être un vrai casse-tête et sa part de marché (encore très élevée malheureusement) oblige encore l’intégrateur à adapter son code CSS en fonction de ce dernier.

La compatiblité multi-navigateur est donc un problème récurrent dans l’intégration des pages pour le web.

C’est à ce moment qu’intervient tout l’intérêt des hack CSS.

Il existait (jusqu’à Internet Explorer 7) un hack plutôt intéressant qui s’écrivait   ! important.

Comme dans l’exemple ci-dessous, on pouvait alors déclarer une propriété CSS suivie de   ! important, puis la redéclarer aussitôt de manière à l’adapter pour Internet Explorer.

 #mon_element{
     margin-top: 10px ! important;
     margin-top: 20px;
 }

Pour firefox, toute propriété suivie de ! important est définitive. Même si l’on déclare cette propriété dans la feuille de style, ce sera cette valeur qui sera appliquée.

Jusqu’à IE6, Internet Explorer ne reconnaissait pas ce hack. Il prenait donc en compte la dernière propriété attribuée à l’élément dans la feuille de style (principe de l’héritage).

Or, dorénavant IE7 reconnaît ce hack. Il n’est donc plus utile de l’exploiter.

L’alternative, fort efficace en définitive, consiste à employer un   * pour IE 7 et un   _  pour IE 6.

Cela signifie qu’au sein de la même feuille de style, vous pourrez déclarer trois valeurs différentes pour la propriété d’un élément et que chaque navigateur interprétera la valeur qui lui est destinée.

Exemple:

 #mon_element{
     margin-top: 10px;/* Pour tous les navigateurs
     *margin-top: 20px;/* Pour IE 7
     _margin-top: 30px;/* Pour IE 6
 }

Dans l’exemple ci-dessus, l’élément HTML ayant pour id « mon_element » aura un margin-top de 10 pixels sur Mozilla, de 20 pixels sur Internet Explorer 7 et de 30 pixels sur Internet Explorer 6.

Charger une feuille de style différente en fonction navigateur

Cependant, les hack CSS ne sont parfois pas suffisants et l’autre alternative, quasi imparable, consiste à charger une feuille de styles en plus (en profitant du principe de l’héritage) en fonction du navigateur utilisé par l’internaute.

L’idée est de charger une feuille de style commune à tous les navigateurs que l’on nommera par exemple « main.css« . Cette feuille de style contiendra toutes les propriétés avec leur valeur pour satisfaire l’affichage sur un navigateur tel que Firefox.

Ensuite, à l’aide d’un simple script PHP, nous allons détecter le navigateur utilisé par l’internaute et en fonction de celui-ci, nous chargerons une nouvelle feuille de style appropriée.

En redéclarant les valeurs des propriétés qui ne s’affichent pas correctement dans le navigateur utilisé (afin de les adapter à ce navigateur), nous allons donc « écraser » les valeurs déclarées dans la feuille de style « main.css« .

Exemple de script:

 < ? php

  ## On charge une feuille de styles commune à tous les navigateurs
  echo < link rel="stylesheet" href="main.css" type="text/css"  media="screen" />;

  ## On récupère le nom du navigateur utilisé
  $navigator = $_SERVER['HTTP_USER_AGENT'];

  ## Si IE6 -> feuille de style pour IE6
  if(preg_match('/MSIE 6.0/',$navigator))
     echo < link rel="stylesheet" type="text/css" href="styleIE6.css" media="screen"/>;

  ## Si IE7 -> feuille de style pour IE7
  else if(match('/MSIE 7.0/',$navigator))
     echo < link rel="stylesheet" type="text/css" href=styleIE7.css" media="screen"/>;

  ?>