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.

Quand et comment utiliser les hacks et les feuilles de style alternatives ?

Vous devrez sans aucun doute utiliser des styles alternatifs si vous créez un site Web utilisant des CSS et que vous souhaitez le rendre compatible avec tous les navigateurs (browsers existants sur le marché). Lors de la conception de votre site, pensez à vérifier son bon affichage sur les navigateurs suivants (au minium) :

  • Explorer 7
  • Explorer 8
  • Explorer (dernière version)
  • FireFox
  • Safari
  • Google Chrome
Si votre design de site ne fonctionne pas sur l'un d'eux, une grande partie des internautes ne pourra pas naviguer sur votre site.
Google Chrome est-il le nouveau Explorer 6 des concepteurs de sites ?
Le blog webdesignerdepot s'interroge sur l'hégémonie croissante de Chrome et sur ses particularités qui obligent les designers de site Web à concevoir leurs sites d'une façon particulière (article en anglais).

 

Cette page explore les différentes méthodes de styles alternatifs et comporte les chapitres 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 depuis 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. Ce qui peut affecter l'accessibilité des utilisateurs pour ceux qui souhaitaient jouer au poker en ligne, ou pour tout autre type d'accés au Web.

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 ni dans les suivantes. 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"

e) Le "GiantIsland" (hack universel)

Ce hack est conçu pour fonctionner avec tous les navigateurs existants en 2011. Il exploite plusieurs de leurs particularités pour permettre une gestion de style adapté à :
Vouc pouvez consulter une page donnant tous les détails sur ce hack sur le site de GiantIsland.

Voici les styles CSS :

CSS :

<style type="text/css">

#test1 {
font-weight:bold;
font-size:14px;
color:orange;
voice-family:"\"}\"";
voice-family:inherit;
color:grey;\
color:black;
[color:black;
color:yellow;]
}
/*end*/
/*\*/
html*#test1 {
[color:red;
color:blue;
]color:purple;
}/*end*/
.dummyend[id]{clear:both;}

/*\*/
* html #test1 {
color:green;
}
/*end*/

</style>

et voici un exemple de code HTML démontrant le fonctionnement de ce hack :

HTML :

<div id="test1">
<p>Les navigateurs respectant les standards tels que Mozilla affichent ce bloc en noir.
</p>
<p>Les anciennes versions de Mozilla (&lt; 1.01) affichent ce bloc en rouge
</p>
<p style="background-color: rgb(119, 121, 119);">Google Chrome (2.01+), Opera, et Safari (4.0+) affichent ce bloc en jaune
</p>
<p>Google Chrome (1.0 - 2.01), et Safari (1 - 3) affichent ce bloc en bleu
</p>
<p>Internet Explorer 8 affiche ce bloc en gris
</p>
<p>Internet Explorer 7 affiche ce bloc en violet
</p>
<p>Internet Explorer 6 affiche ce bloc en vert
</p>
<p>Internet Explorer 5 affiche ce bloc en orange
</p>
</div>
Et voici pour finir, le bloc en question qui doit apparaître sous une couleur différente selon le navigateur que vous utilisez :

Les navigateurs respectant les standards tels que Mozilla affichent ce bloc en noir.

Les anciennes versions de Mozilla (< 1.01) affichent ce bloc en rouge

Google Chrome (2.01+), Opera, et Safari (4.0+) affichent ce bloc en jaune

Google Chrome (1.0 - 2.01), et Safari (1 - 3) affichent ce bloc en bleu

Internet Explorer 8 affiche ce bloc en gris

Internet Explorer 7 affiche ce bloc en violet

Internet Explorer 6 affiche ce bloc en vert

Internet Explorer 5 affiche ce bloc en orange

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.

 





Le copyright de cette page appartient à css-faciles.

This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie

Valid HTML 4.01 Transitional- Vérifier l'orthographe avec RankSpirit et "BonPatron"
Dans cette page :
Raccourcis
Contactliens d'évitement et raccourcis clavierDroits de copie Accueil Imprimer
Aller au menu