deux navigateurs à la fois

Les feuilles de styles alternatives

Ou comment gérer les bugs d'Internet Explorer

Les différents navigateurs du marché ne comprennent pas tous les normes CSS de la même façon. Internet Explorer présente notamment de nombreuses particularités qui demandent souvent une gestion adaptée.

Voici comment mettre en place des styles dits "alternatifs" qui vous permettront de gérer ces particularités.

Sélection de liens concernant les "hacks" et les feuilles de styles alternatives.

Eric Dupin, auteur de l'excellent blog "Presse-citron" a expérimenté avec douleur les dangers des "hacks". Voici sa réaction à chaud largement commentée par ses lecteurs.

 

Cette page explore les différentes méthodes de styles alternatifs et comporte les chapitre suivants :

Pourquoi des styles alternatifs ?

Les toutes premières versions d'Internet Explorer datent des années 90. Ce navigateur, qui fut pendant longtemps le plus utilisé au monde, à tenté de suivre petit à petit les évolutions des normes CSS avec plus ou moins de succès.

Même dans sa version 7, Explorer traîne encore avec lui une façon bien particulière de comprendre et d'interpréter ces normes. Au point que ses comportement sont parfois tout bonnement incompatibles avec ceux de Firefox et Opera.

Ainsi, pour pouvoir réaliser certaines mises en page, il n'existe pas d'autre solution que de mettre en place des styles particuliers, spécifiquement destinée à IE, et d'autres destinés aux autres navigateurs.

Trois méthodes peuvent être utilisées dans ce but :

Notons qu'Internet Explorer n'est pas le seul navigateur à interpréter les normes de travers. Opera et Mozilla présentent aussi leurs petits défauts, et Firefox n'a pas toujours été irréprochable dans ses premières versions.

Voici quelques listes recensant les bugs des différents navigateurs :

Les "hacks" : exemple, avantages et inconvénients

a) Exemple de hack

Cette déclaration :

body { _background:red }

sera comprise et interprétée par Internet Explorer dans ses versions 5.5 et 6, mais pas dans sa version 7. Elle ne sera pas non plus interprétée par Firefox ou Opera.

Cela signifie qu'une page comportant cette déclaration sera rouge sous IE 5.5 et 6, alors qu'elle restera blanche sous les autres navigateurs.

N'allez pas chercher de raison scientifique à cette différence de comportement. "_background" n'est pas une propriété CSS et ne devrait être acceptée par aucun navigateur. L'écriture correcte est "background" (sans underscore). Il se trouve simplement qu'IE fait parfois preuve d'une grande "tolérance" dans les syntaxes qu'il accepte.

L'utilisation de ce type de particularité est ce que l'on appelle un "hack".

Note : IE 7 n'interprête plus les propriétés précédées d'un underscore ("_") ou d'un tiret ("-"), mais il continue à interpréter les propriétés précédées des caractères suivants :

' ~ ! @ # $ % ^ & * ( ) = + [ ] { | , < > . / ?         Exemple : "|background:red"

Les "hacks" destinés à ce navigateur ne sont donc pas tout à fait morts !

b) Avantages des "hacks"

  1. Les hacks permettent d'éviter la mise en place de feuilles de styles alternatives (voir plus bas) qui alourdissent les codes des pages.
    Quand un "petit" problème d'affichage demande une "petite" correction, il est tentant de passer par un "hack" plutôt que de mettre en place plusieurs feuilles de styles.
  2. Les hacks permettent de gérer les "particularités" d'Opera, de Mozilla ou de Firefox alors que les feuilles de styles alternatives ne permettent pas de mettre en place des styles spécifiques pour l'un ou l'autre de ces navigateurs. Notez toutefois qu'un petit bout de code javascript ou php vous permettra d'obtenir le même résultat avec moins de risques.

c) Inconvénients des "hacks"

  1. Même s'ils permettent de régler temporairement un problème d'affichage, les "hacks" représentent une source d'ennuis potentiels qu'il serait dangereux de sous-estimer.
    Les navigateurs évoluent en permanence. Comment savoir si le "hack" mis en place pour telle ou telle version aura toujours sa raison d'être pour les versions suivantes ? Et même si c'est le cas, comment savoir s'il continuera à fonctionner avec ces nouvelles versions ?
    Exemple 1 : ".monstyle {position:fixed;?position:absolute}" permettait de corriger un bug d'IE6 qui ne reconnaissait pas la propriété "position:fixed". Ce "hack" continuera à avoir de l'influence sur IE7, alors que ce dernier n'en a plus besoin.
    Exemple 2 : ".monstyle {_width:1%}" permettait de régler certains problèmes d'affichage sous IE6. Ce "hack" ne fonctionne plus avec IE7 qui présente pourtant dans certains cas les mêmes problèmes d'affichage.
  2. La plupart des "hacks" génèrent des erreurs lors de la validation par les vérificateurs de code. Même si cet inconvénient est mineur, il gênent l'interprétation de leurs résultats et sème le doute sur la qualité de votre code.

Disons-le tout net : nous vous déconseillons formellement de passer par des "hacks" pour régler les différences existantes entre les navigateurs.

Il existe souvent plusieurs façons d'obtenir la même mise en page. Avant de mettre en place un "hack", essayez plutôt de "contourner" le problème en utilisant d'autres techniques que celles qui posent problème.

Si vous devez malgré tout gérer les particularités de certains navigateurs (ce qui est hélas souvent nécessaire) procédez plutôt comme suit :

d) Listes de "hacks"

Les feuilles de style alternatives

Voici la voie royale pour mettre en place des styles uniquement destinés à Internet Explorer. Elle utilise ce que l'on appelle les "commentaires conditionnels" (Conditional comments).

Cette méthode garantie la compatibilité de vos pages avec les futures versions d'Explorer et la validation de votre code par tous les validateurs dédiés.

a) Principe

La norme HTML prévoit la possibilité d'intégrer des commentaires dans vos pages.

Syntaxe :

<!-- mon commentaire -->

Ces commentaires sont en principe totalement ignorés par les navigateurs.

Depuis la version 5 d'Explorer, Microsoft a toutefois exploité ces commentaires pour y loger une forme de code que l'on appelle "commentaires conditionnels".

Ces commentaires conditionnels permettent de faire figurer dans vos pages du code HTML qui ne sera interprété que par Internet Explorer.

Syntaxe générale :

<!--[if IE]>
  code HTML
<![endif]-->

b) Sélectionner une version d'Internet Explorer

La syntaxe générale décrite ci-dessus admet plusieurs variations qui permettent de sélectionner la version d'IE à laquelle le code s'adresse :

<!--[if IE]>
  code HTML
<![endif]--> 		"code HTML" sera interprété par toutes les versions d'IE.
<!--[if IE 6]>
  code HTML
<![endif]--> 		"code HTML" ne sera interprété que par Internet Explorer 6 (vous pouvez remplacer le "6" par "5.5" ou par "7" pour adresser un bout de code à une autre version d'IE).
<!--[if IE lt 6]>
  code HTML
<![endif]--> 		"code HTML" ne sera interprété que par les versions d'Internet Explorer antérieures à la version 6 (vous pouvez remplacer le "6" par "5.5" ou par "7" pour adapter ce comportement à vos besoins).
<!--[if IE glt 6]>
  code HTML
<![endif]--> 		"code HTML" ne sera interprété que par les versions d'Internet Explorer supérieures ou égales à la version 6 (c'est à dire par les version 6 et 7 - vous pouvez remplacer le "6" par "7" pour destiner le code à la version 7 et plus).
<!--[if IE gt 6]>
  code HTML
<![endif]--> 		"code HTML" ne sera interprété que par les versions d'Internet Explorer supérieures à la version 6.


Exemple :

<!--[if IE 6]>
  body {background-color:red;}
<![endif]-->

La page ne sera rouge que lorsque vous la visualisez avec Internet Explorer version 6.

c) Syntaxe négative

Blog-and-blues explique très clairement comment utiliser une syntaxe négative, c'est à dire comment faire en sorte qu'un style soit interprété par tous les navigateurs, sauf Internet Explorer, ou sauf une version particulière d'Internet Explorer.

Styles alternatifs en javascript

Pour adapter des styles à une version précise d'un navigateur particulier, le javascript peut être une alternative très intéressante, surtout si le navigateur en question est Mozilla, Mozilla FireFox, ou Opera.

Le seul inconvénient de cette méthode est quelle ne fonctionnera pas pour les internautes ayant désactivé le javascript (5 à 10% de la population selon les sources).

En raison de cette faiblesse, et si la chose est possible avec votre serveur, vous devrez plutôt vous orienter vers la solution php proposée dans notre paragraphe suivant.

A titre d'exemple, nous allons supposer que vous souhaitiez attribuer une couleur de texte différente en fonction de chaque type de navigateur :

Code :

<script language="JavaScript">
  if((navigator.appName.indexOf("Explorer") >= 0)
&& (navigator.appVersion.indexOf('6')>=0 ))
  {
    document.writeln('<style type="text/css">');
    document.writeln("body { color:blue }");
    document.writeln('</style>');
  }
  if((navigator.appName.indexOf("Explorer") >= 0)
&& (navigator.appVersion.indexOf('7')>=0 ))
  {
    document.writeln('<style type="text/css">');
    document.writeln("body { color:orange }");
    document.writeln('</style>');
  }
  if((navigator.appName.indexOf("Netscape") >= 0) && (navigator.userAgent.indexOf("Mozilla") >= 0) && (navigator.userAgent.indexOf("Firefox") <= 0))
  {
    document.writeln('<style type="text/css">');
    document.writeln("body { color:black }");
    document.writeln('</style>');
  }
  if((navigator.appName.indexOf("Netscape") >= 0) && (navigator.userAgent.indexOf("Mozilla/4") >= 0) && (navigator.userAgent.indexOf("Firefox") <= 0))
  {
    document.writeln('<style type="text/css">');
    document.writeln("body { color:red }");
    document.writeln('</style>');
  }
  if(navigator.userAgent.indexOf("Firefox") >= 0)
  {
    document.writeln('<style type="text/css">');
    document.writeln("body { color:brown }");
    document.writeln('</style>');
  }
  if(navigator.userAgent.indexOf("Firefox/2") >= 0)
  {
    document.writeln('<style type="text/css">');
    document.writeln("body { color:green }");
    document.writeln('</style>');
  }
  if(navigator.userAgent.indexOf("Opera") >= 0)
  {
    document.writeln('<style type="text/css">');
    document.writeln("body { color:violet }");
    document.writeln('</style>');
  }
</script>

Ce code est à inclure dans la section <head> de votre page. Il attribuera les couleurs de texte suivantes aux navigateurs correspondants :

Explorer 6 Bleu
Explorer 7 Orange
Mozilla 4 Rouge
Autres versions de Mozilla Noir
Firefox 2 Vert
Autres versions de Firefox

Marron
Opera Violet

Il ne vous reste plus qu'à supprimer les tests n'ayant pas d'intérêt pour vous et à remplacer "body { color:xxxxx }" par l'attribution de styles que vous voulez réserver à tel ou tel navigateur.

Vous pouvez aussi remplacer les 3 lignes

document.writeln('<style type="text/css">');
document.writeln("body { color:orange }");
document.writeln('</style>');

Par une ligne telle que :

document.writeln('<link href="mes-styles.css" media="all" rel="stylesheet" type="text/css" />');

afin de charger une feuille de style entière, dédiée au navigateur visé.

Styles alternatifs en pHP

Pour adapter des styles à une version précise d'un navigateur particulier, le PHP est une solution supérieure à celle du chapitre précédent. Elle permet de gérer tous les navigateurs dans toutes leurs versions et ne verra son fonctionnement bloqué que pour les internautes ayant installé un système empêchant de détecter leur navigateur (cas rarissime).

Pour l'illustrer, nous reprenons l'exemple du chapitre précédant consistant à attribuer une couleur de texte différente en fonction de chaque type de navigateur :

Code :

<style type="text/css">
<?php
if (ereg("MSIE 6.0", $_SERVER["HTTP_USER_AGENT"])) {
/* Début de la feuille de style pour Internet Explorer 6 */
echo 'body {color:blue;}';
/* Fin de la feuille de style pour Internet Explorer 6 */
} else if (ereg("MSIE 7", $_SERVER["HTTP_USER_AGENT"])) {
/* Début de la feuille de style pour Internet Explorer 7 */
echo 'body {color:orange;}';
/* Fin de la feuille de style Internet Explorer 7 */
} else if ((ereg("Mozilla/", $_SERVER["HTTP_USER_AGENT"])) && (!ereg("Firefox", $_SERVER["HTTP_USER_AGENT"])) && (!ereg("MSIE", $_SERVER["HTTP_USER_AGENT"]))) {
/* Début de la feuille de style Mozilla */
echo 'body {color:black;}';
/* Fin de la feuille de style pour Mozilla */
} else if ((ereg("Mozilla/4", $_SERVER["HTTP_USER_AGENT"])) && (!ereg("Firefox", $_SERVER["HTTP_USER_AGENT"])) && (!ereg("MSIE", $_SERVER["HTTP_USER_AGENT"]))) {
/* Début de la feuille de style Mozilla 4 */
echo 'body {color:red;}';
/* Fin de la feuille de style pour Mozilla 4 */
} else if (ereg("Firefox/2", $_SERVER["HTTP_USER_AGENT"])) {
/* Début de la feuille de style Firefox 2*/
echo 'body {color:green;}';
/* Fin de la feuille de style Firefox 2*/
} else if (ereg("Firefox/", $_SERVER["HTTP_USER_AGENT"])) {
/* Début de la feuille de style Firefox */
echo 'body {color:brown;}';
/* Fin de la feuille de style Firefox */
} else if (ereg("^Opera/", $_SERVER["HTTP_USER_AGENT"])) {
/* Début de la feuille de style pour Opera */
echo 'body {color:violet;}';
/* Fin de la feuille de style pour Opera */
} else {
/* Début de la feuille de style pour les navigateurs autres */
/* Fin de la feuille de style pour les navigateurs autres */
}?>
</style>

Ce code est à inclure dans la section <head> de votre page. Il attribuera les couleurs de texte suivantes aux navigateurs correspondants :

Explorer 6 Bleu
Explorer 7 Orange
Mozilla 4 Rouge
Autres versions de Mozilla Noir
Firefox 2 Vert
Autres versions de Firefox

Marron
Opera Violet

Il ne vous reste plus qu'à supprimer les tests n'ayant pas d'intérêt pour vous et à remplacer "body { color:xxxx }" par l'attribution de styles que vous voulez réserver à tel ou tel navigateur.

Vous pouvez aussi utiliser un code tel que :

<?php
if (ereg("MSIE", $_SERVER["HTTP_USER_AGENT"])) {
/* Début de la feuille de style pour Internet Explorer*/
echo '<link href="mes-styles.css" media="all" rel="stylesheet" type="text/css" />';
/* Fin de la feuille de style pour Internet Explorer*/
}?>

afin de charger une feuille de style entière, dédiée au navigateur visé (Explorer, dans cet exemple).

A lire aussi : Correction de la "Box model" en php.

 


Ce site vous a plu ? Visitez aussi : L'annuaire ultra-sélectif pour webmasters et Le design des sites Web

Valid HTML 4.01 Transitional - Vérifier l'orthographe avec RankSpirit et "BonPatron"
conception :
Design de sites Web
Raccourcis
Accueil Recherche ImprimerImprimer Aller au contenuHaut de page Page précédente Page suivante liens d'évitement et raccourcis clavierAccessibilité Droits de copieCopyrights ContactContact Aller au menu
Dans cette page :
Pourquoi des styles alternatifs ? Les "hacks" : exemple, avantages et inconvénients Les feuilles de style alternatives Styles alternatifs en javascript Styles alternatifs en pHP
Sites favoris :
RéférencementRéférencer un site web GraphismeLe design des sites web AnnuaireRessources webmasters FormationDidacticiels Photoshop