Des styles en fonction du navigateur

Attention : les informations contenues dans ce document sont anciennes et peuvent être obsolètes.

L'utilisation des feuilles de styles en cascade pour mettre en page son site web n'est pas toujours évident, non que cette technique soit compliquée mais parce que, malgré l'existence de normes communes, chaque navigateur n'en fait un peu qu'à sa tête. Heureusement, des solutions existent. Cependant, leur utilisation ne risque-t-elle pas d'entretenir le statu quo ?!

Avouons-le tout de suite, la nécessité d'appliquer des styles différents en fonction du navigateur des internautes n'a (presque) qu'une seule raison d'être : combler les lacunes d'Internet Explorer. Le navigateur de Microsoft a beau être le plus utilisé à travers le monde - et de loin, il est aussi sans doute celui qui respecte le moins les standards du web (1). La toile mondiale n'en est plus à un paradoxe près.

Ces lacunes sont trop nombreuses pour être listées in-extenso, mais elles sont une épine, que dis-je un baobab planté dans le pied des développeurs web ou de tout internaute possédant un site personnel et qui souhaitent construire des pages HTML en utilisant les feuilles de styles en cascade ou CSS.

Cet article fait le point sur les quelques techniques découvertes par le novice que je suis lors de la construction de ce site pour contourner les limitations d'IE. Ces astuces ne sont pas spécifiquement pensées pour le navigateur par défaut de Windows (sauf la dernière) mais, vous l'aurez compris, c'est celui qui en a le plus besoin.

En espérant que cela puisse être utile aux futurs webmestres amateurs comme moi.

Des scripts qui identifient le navigateur

Une première méthode consiste à utiliser un langage de script assez répandu sur internet : le javascript. Son application nécessite quelques notions de programmation, mais il s'agit d'un langage suffisamment simple et clair pour que tout le monde puisse le comprendre.

Exemple de script

Voici par exemple à quoi pourrait ressembler un petit script simplifié à l'extrême destiné à faire appliquer une feuille de styles spécifique au navigateur de Microsoft :

var nomnav = navigator.appName;
if (nomnav == 'Microsoft Internet Explorer') {
  document.write("<link rel='stylesheet' media='screen' type='text/css' href='styles_ie.css'>");
}
else {
  document.write("<link rel='stylesheet' media='screen' type='text/css' href='styles.css'>");
}

On demande d'abord au script d'identifier le navigateur de l'internaute et de stocker son nom dans la variable nomnav. Le script effectue ensuite un test : si le navigateur est Internet Explorer, il appellera la feuille de styles styles_ie.css; pour tous les autres navigateurs, il appellera la feuille de styles par défaut styles.css. Vous placez ce morceau de code dans l'en-tête de la page web (entre la balise <head> et </head>).

Il ne s'agit ici que d'une ébauche de script ; vous pouvez multiplier les boucles « si » pour identifier d'anciennes versions d'Internet Explorer ou de Netscape. Vous pouvez ainsi virtuellement appliquer une feuille de style spécifique à n'importe quel navigateur web.

Limites de cette technique

Mais cette méthode comporte une limite assez gênante: de nombreux navigateurs comme Mozilla et Opera peuvent s'identifier en tant qu'Internet Explorer. Pourquoi demanderez-vous ? Et bien simplement parce que certains site de banques, d'administrations ou autres on la fâcheuse tendance à n'accepter les connexions que si vous utilisez IE. Les internautes qui modifient l'identification de leur navigateur pourraient donc avoir quelques surprises si vous appliquez ce type de script sur votre site.

Une seconde limitation est tout aussi contrariante : il semble qu'environ 11% des internautes désactivent la gestion du javascript dans leur navigateur, essentiellement pour des raisons de sécurité. Même si ce pourcentage peut paraître faible, il n'est pas négligeable.

Analyser les possibilités du navigateur

Alors on peut complexifier le test pour analyser autre chose que le nom du navigateur dans la requête de contact du logiciel. Il existe de nombreux exemples de scripts qui décortiquent certains paramètres pour être sûr d'identifier le bon navigateur mais il est préférable d'adopter une toute autre approche.

Pour identifier Opera, la solution reste valable, et peut même être simplifiée : la requête d'identification de ce navigateur contient toujours le terme « opera », même s'il se présente sous une autre identité (Internet Explorer ou Mozilla). Ensuite, on considère la manière dont le navigateur accède au document à travers le DOM

Donc, pour identifier et appliquer une feuille de style à Internet explorer, on pourra écrire :

// Si on accède au Dom par document.all
// et qu'il ne s'agit pas d'Opera: c'est IE
if (document.all && !window.opera) {
  document.write("<link rel='stylesheet' media='screen' type='text/css' href='styles_ie.css'>");
}
// Sinon, appliquer la bonne feuille de styles
else {
  document.write("<link rel='stylesheet' media='screen' type='text/css' href='styles.css'>");
}

Si le javascript est une solution apparemment efficace, la technique comporte des restrictions à prendre en considération. Elle nécessite par ailleurs l'apprentissage d'un nouveau langage.

En savoir plus

Titre
Browser Detecting (and what to do Instead)
Auteurs
  • J. LEY
Editeur
Jibbering
Titre
Browser detect
Auteurs
  • Peter-Paul. KOCH
Editeur
Quirksmode
Remarque
Comment détecter les navigateurs.

Les commentaires conditionnels

Une solution plus simple que les scripts existe : il s'agit des commentaires conditionnels HTML.

Les commentaires HTML

Un commentaire HTML, c'est un morceau de texte que vous placez entre une balise <!-- et une balise --> dans votre page web. Ce texte ne sera pas lu par le navigateur ou, plus précisément, ne sera pas interprété comme du code à afficher. Si les pages de votre site comprennent par exemple un entête, une zone centrale de texte et un pied de page, vous pouvez la présenter comme suit :

<!-- Début en-tête -->
[[Le code de votre entête]]
<!-- Fin en-tête -->
<!-- Début texte -->
[[Le code de votre texte]]
<!-- Fin texte -->
<!-- Début pied-de-page -->
[[Le code de votre pied-de-page]]
<!-- Fin pied-de-page -->

Les commentaires permettent ainsi de s'y retrouver plus facilement à l'intérieur du code.

Lire le commentaire si le navigateur est...

Mais les commentaires peuvent aussi servir d'une toute autre façon, assez semblable d'ailleurs à ce que fait le script javascript du précédent paragraphe : le morceau de code placé entre les balises de commentaires ne sera lu que si une certaine condition est remplie. Ce type de commentaire, appelé commentaire conditionnel, se présentera alors comme suit :

<!--[[if IE]>
<link rel="stylesheet" type="text/css" media="screen" href="styles_ie.css">
<![[endif]]-->

Si le navigateur de l'internaute est Internet Explorer alors la ligne de code du commentaire sera lu, et la feuille de styles spécifique à IE sera chargée. Sinon, cette ligne passera inaperçu, comme un commentaire classique.

Comme précédemment, il faut placer ce morceau de code entre les balises meta de votre page web, à la place de la déclaration de votre feuille de styles en cascade.

Avec cette technique, plus besoin que l'internaute ait la gestion du javascript activée. Et le commentaire conditionnel permet apparemment de charger la feuille de style correctrice uniquement pour Internet Explorer.

En savoir plus

  • About Conditional Comments. Les explications de Microsoft sur le pourquoi du comment des commentaires conditionnels. En anglais, assez technique mais instructif.
  • De l'intérêt des commentaires conditionnels. L'avis de Denis Bourdeau, un développeur web qui s'y connaît en standards de publication sur internet puisqu'il est l'un des collaborateurs du site francophone référence sur le sujet: Open Web.

Les hacks css

La solution des commentaires conditionnels est vraiment séduisante, mais il en existe une autre qui ne nécessite pas d'insérer des morceaux de code supplémentaires dans les pages web de votre site. Pour corriger les failles d'Internet Explorer, il y a ce qu'on appelle les hacks CSS, des trucs ou astuces qui permettent schématiquement de masquer certaines propriétés à IE pour lui en faire appliquer d'autres qu'il comprend.

Prenons un exemple : si vous avez une boîte de contenu nommée « boite » qui doit rester fixe par rapport au reste de la page (position: fixed), une propriété qu'Internet Explorer ne sait pas interpréter, vous pouvez écrire dans votre fichier CSS ce qui suit :

.boite {
  position: absolute;
}
html>body .boite {
  position: fixed;
}

Deux définitions pour la même propriété mais lues différemment par les navigateurs, comme l'explique Laurent Denis dans un article publié sur Open Web :

MSIE Windows ne lira que la première définition (...) et ignorera la seconde car il ne comprend pas la syntaxe html>body. Les navigateurs supportant la position fixe liront les deux positionnements, mais le second se substituera au premier car il est placé après celui-ci dans la feuille de style.

Laurent Denis, « Initiation au positionnement CSS: 3. position absolue et fixe », Open Web, 24 mars 2003.

Au final, la boîte disparaîtra lorsque les utilisateurs d'IE descendront dans la page alors qu'elle restera toujours visible avec des navigateurs gérant convenablement les propriétés CSS, comme Mozilla et Opera.

Voilà donc une solution simple et rapide à l'un des bogues d'Internet Explorer. Il en existe bien d'autres, et la plupart - mais pas tous - peuvent être contourner avec une astuce de ce genre.

En savoir plus

  • Liste des hacks css. CSS-Discuss est un site de ressources sur les feuilles de styles. Cette page vous donnera une liste de liens web concernant les principales astuces permettant de corriger les lacunes de certains navigateurs.

Le patch IE 7

Pour terminer, parlons de l'utilitaire IE7, un morceau de code qui s'annonce révolutionnaire: son objectif est purement et simplement de corriger toutes les failles d'Internet Explorer dans le domaine des CSS (et, en fait, dans d'autres domaines aussi, comme la gestion de la transparence des images au format .png). Un projet ambitieux, qui se résume pourtant à un simple patch d'une vingtaine de Ko.

Cette apparente simplicité force d'ailleurs à s'interroger, comme l'a fait Jean-Marc Fontaine dans un récent billet de son blog Dying Culture :

"Seulement une telle réalisation amène une question à 1000 roubles: Si un individu seul peut développer en Javascript et sur son temps libre un outil permettant de corriger la plupart des bugs d'Internet Explorer, comment expliquer le fait que Microsoft n'ait pas été capable avec le code source et ses bataillons de développeurs professionnels d'en faire autant."

Jean-Marc Fontaine, « IE7 le retour », Dying Culture, 16 avril 2004.

Pour en revenir à l'outil en lui-même, j'ai tenté de l'installer, mais les résultats n'ont pas été à la hauteur: le script a empêché le chargement de toutes les images utilisée en fond. Il a aussi déstructuré la majeure partie de la mise en page. S'il a parfaitement fonctionné sur des tests simples, avec des feuilles de styles par trop compliquées, son utilisation reste encore aléatoire. Mais il ne s'agit que d'une version alpha, donc encore en développement.

A quoi tout cela sert-il?

La moins pire des solutions

Après ce petit tour d'horizon non exhaustif des techniques permettant d'appliquer des styles différents en fonction des navigateurs, les hacks CSS apparaissent comme la solution la plus économique et la plus simple à mettre en place. Ils ne nécessitent que l'édition de la feuille de style et en quelques lignes de code supplémentaires, la plupart des failles d'Internet Explorer peuvent être contournées.

L'idéal serait bien-sur de pouvoir construire la maquette d'un site sans faire appel à ces astuces, mais dans un monde parfait, le numéro un mondial des logiciels offrirait à ses clients un navigateur qui respecte les standards du web, et elles n'auraient ainsi plus de raisons d'exister. Il est bon de rêver parfois...

Et si on arrêtait les conn... ?!

D'ailleurs, quel serait l'intérêt de Microsoft ? Pourquoi perdre son temps (et son argent) à construire un navigateur qui gère convenablement les standards quand vous avez une armée de webmestres tous plus doués les uns que les autres qui se creusent les méninges à trouver des solutions à votre place ?! Et gratuitement en plus.

En développant des solutions de contournement des bogues d'Internet Explorer, et en les utilisant, ne devenons nous pas les principaux acteurs - involontaires - d'une situation pour le moins gênante ?! Car comment expliquer aux internautes qu'un site s'affiche mieux avec un navigateur respectueux des standards s'ils ne voient aucune différence quand ils se connectent avec IE ?!

Dés lors, ne serait-il pas plus constructif de simplement oublier ces bidouilles, de développer des sites avec des CSS et du XHTML valides, qui respectent la sémantique web, qui sont accessibles, en se moquant de l'allure qu'ils auront sous IE ?! Si un nombre croissant de pages web deviennent illisibles à cause des bogues d'affichage du navigateur de Microsoft, cela fera peut-être réfléchir les pontes de la multinationale de Redmond, ou du moins cela incitera les internautes à utiliser des logiciels qui respectent les standards web, comme Mozilla ou Opera.

Ce discours est bien sur totalement utopiste, voire purement irréaliste : on ne peut raisonnablement pas demander à des webmestres professionnels soucieux des standards de se couper ainsi de 90% des internautes ; leurs clients n'apprécieraient sans doute cela que très très modérément. Et même si ce genre de contestation se développe, il faudra qu'elle atteigne une certaine envergure pour que cela puisse compter. Et sans doute la plupart des possesseurs de sites personnels, comme votre serviteur, rechigneraient eux aussi à sauter le pas, même sans la menace de sanctions professionnelles (financières).

Une dernière remarque : Internet Explorer n'est évidemment pas le seul navigateur qui ne supporte pas totalement les standards du web. Même les plus évolués des logiciels comme Mozilla ont quelques failles. Le cas du navigateur de Microsoft reste cependant le plus problématique car c'est celui qui souffre des plus grands bogues et qu'il est le plus répandu. La contestation ne serait donc pas anti-microsoftienne primaire, mais simplement du « 100% CSS hacks free ». Je me demande si je ne vais pas laisser ma nouvelle maquette en l'état :-) ...