Navigateurs : gestion de la compatibilité

Il faut savoir que les navigateurs n’offrent pas le même rendu d’un même site web. Même si ces derniers essayent de suivre les mêmes règles CSS et HTML. La raison à cela provient de la version du navigateur. Plus celui-ci est ancien, plus le risque est grand que celui-ci ne comprenne pas les fonctionnalités utilisés pas votre site.

Dans ce chapitre, nous allons aborder les méthodes permettant d’apprendre la gestion des différences entre navigateurs afin d’obtenir les mêmes résultats, les meilleurs, sur les différents navigateurs.

Commentaires conditionnels

Généralement, les versions antérieures d’IE posent souvent problèmes. Etant donné que certaines de ces versions sont encore utilisées, il est important d’apprendre à composer et faire avec.

Syntaxe des commentaires conditionnels

Pour pallier à l’ancienneté des versions et pour que celles-ci affichent le site correctement, il existe une méthode permettant d’adapter le code de votre site à ces dites versions d’IE. En effet, les commentaires conditionnels offrent la possibilité qu’une portion du code HTML soit bien lue par ces versions. Ces commentaires HTML ont une forme spécifique et ne seront lues que par Internet Explorer.

L’ensemble forme un commentaire HTML : il commence par . Les navigateurs ignoreront donc le code qui se trouve à l’intérieur… sauf IE, qui y voit une condition [if IE] signifiant « Si c’est Internet Explorer ».
Avec ce code, les différentes versions d’IE sont ciblées

Autre exemple :

Pour viser l’ensemble des versions, on pourra utiliser les symboles :

  • lt : inférieur ;
  • lte : inférieur ou égal ;
  • gt : supérieur ;
  • gte : supérieur ou égal.

La nécessité des commentaires conditionnels

Comme vu précédemment, les commentaires conditionnels permettent d’afficher un message à destination des anciennes versions d’IE : « Attention, vous naviguez avec un navigateur très ancien, mettez-vous à jour… ».
Toutefois, ces commentaires sont surtout utilisés pour le chargement des feuilles de styles spéciales pour ce navigateur.

La feuille style_ie.css sera lue ici uniquement par les versions d’IE inférieures ou égales à IE8. À l’intérieur, on peut « adapter » le code CSS de sorte que le site s’affiche mieux sur ces navigateurs. Il ne vous restera plus qu’à modifier la dimension des éléments à votre guise ou encore d’utiliser d’autres méthodes de positionnement qui seront plus adaptées.

Il est à noter toutefois qu’une feuille de style ne suffit pas étant donné la multitude de versions d’IE qui circule : IE6, IE7, IE8… Dans certains cas, il nous sera demandé d’effectuer une modification que sur des versions spécifiques IE6 et IE7, parfois uniquement pour la version 8 et la version 9. Il n’est pas possible de s’en sortir à moins que l’on crée une feuille de style pour chaque version. Le comble de cela reste la gestion de nombreux fichiers .css.

Pour éviter ces nombreux fichiers, il existe une solution qui est employée de façon régulière par les webmestres expérimentés. Cette méthode consiste à donner un nom de classe à la balise englobant le corps de la page. Ce nom de classe permettra d’indiquer dans le fichier .css le nom de la version d’Internet Explorer qui correspond au navigateur. Ainsi, un seul fichier CSS suffira.

Exemple, avec l’écriture , cela permet d’indiquer que le navigateur est IE dans le fichier CSS. On pourra par la suite écrire dans ce fichier CSS :

Les commentaires conditionnels permettent l’écriture de plusieurs versions de la balise en fonction du navigateur :

Répondre