Adapter son CSS aux spécificité des navigateurs

Publié le par Francisek

Quand on débute dans la publication sur Internet, on n'a strictement rien à cirer des standards. C'est trop limitatif dans le processus de découverte d'une technologie. Mais quand on maîtrise déjà un peu plus la dite technologie, on commence à s'intéresser aux standards, et là, ça fait mal. Pour le CSS par exemple, les recommandations du W3C sont plutôt explicite. Pourtant, les géants du logiciel ont tout intérêt (enfin, le croient-ils) de tirer les standards à eux.
Du coup, quand on écrit un code simple, il n'a pas forcément la même signification partout (sans compter les problèmes dus aux bugs des moteurs CSS des navigateurs).
L'exemple du CSS est très révélateur: si l'on prend la petite dizaine de navigateurs les plus présents sur le marché, que l'on décline les différentes versions de chacun et que l'on multiplie par le nombre d'OS sur lesquels ils ont été portés, on comprend vite l'ampleur du problème.
Alors il faut rafisteler afin d'adapter son CSS aux principaux navigateurs et tenter d'obtenir un affichage identique sur un maximum de navigateurs.

Voici donc un échantillon de quelques méthodes d'adaptation dans le CSS ou selecteur désigne un sélecteur par balise (ex: a), par identifiant (ex: #main) ou par classe (ex: .box):

Hack
Explications
Navigateurs
* html selecteur {color:#c00; }
Le meta-sélecteur * est interprété comme un parent (fictif) de html par IE qui sera le seul à reconnaitre cette règle.
Internet Explorer (PC et Mac)
selecteur {color:#c00;}
/* Masque la ligne suivant pour IE Mac \*/
selecteur {color:#00c;}
/* IE5 Mac croit que la ligne précédente est dans le commentaire */
IE Mac considère * comme un caractère d'échappement et ignorera la seconde ligne.
Internet Explorer Mac
selecteur/* */ {color:#c00;}
IE ignore la déclaration s'il n'y a pas d'espace entre le sélecteur et le commentaire
IE4.0 Mac, IE5
body > selecteur {color:#c00}
La déclaration est ignorée pour ces navigateurs
IE4 Mac, IE6- Win, Amaya5.1, Netscape4
/*/*/
selecteur {color:#c00;}
/* */
Ignoré par Netscape 4
NetScape 4
@media all and (min-width:0px){
selecteur {color:#c00;}
}
Opera est le seul navigateur à utiliser ce CSS conditionnel
Opera 7
selecteur {
color:#c00;
* color:#0c0;
}
Sous IE le texte sera vert.
IE5+ Win et IE5.2 OS9
selecteur {
color:#c00;
color: /**/#0c0;
}
Sous IE5.5 Win le texte sera vert
IE5.5 Win
selecteur {
color:#c00;
color: expression('0c0');
}
Sous IE5.5 Win le texte sera vert
IE 5.0+ Win
selecteur {
color: #c00 !important;
color:#0c0;
}
IE ne prend pas en compte le marqueur important et prend la couleur de la seconde définition
IE
selecteur{
_color:#0c0;
}
Le texte sera vert sous IE seulement
IE Win / MacOS9
*>html selecteur{
color:#c00;}
Seul IE7 reconnait ce selecteur
IE7
Notez que Microsoft conseille de ne plus utiliser les hacks CSS car ils ne devraient plus fonctionner avec IE7 qui devrait respecter les standards (j'en ris encore).

Publié dans CSS et Design

Commenter cet article

CB 13/02/2007 20:29

Depuis quelques jours mon en-tête dans IE n'est plus visible, en passant la souris dessus les lignes apparaissent. Que faire merci

Francisek 15/02/2007 23:10

C'est un bug CSS d'IE (le peekaboo), qui se corrige en explicitant un positionnement relatif.Dans le CSS, ça se traduit pour l'entête:#top * { position: relative}
 

Djac Baweur 11/10/2006 00:00

Pour moi, il s'agit d'IE 5.2 sur Mac, et les problèmes décrits persistent, sauf en ce qui concerne
- les modules, revenus miraculeusement à leur place (en fait, je crois avoir compris, c'est la photo de l'album qui ne se chargeait pas, et son nom, assez long, la remplaçait et dépassait du module, d'où le report sous les articles pour avoir la place),
- et bien sûr, la couleur intérieure, pour le # de laquelle je me mettrais des baffes...

Bon, espérons que mes lecteurs utilisent une version IE6...

Merci beaucoup d'avoir pris le temps de se pencher sur mon cas !!

Djac Baweur 10/10/2006 18:15

Bonjour Francisek,
On m'a dirigé chez toi depuis le forum pour mes problèmes.
J'ai d'importantes différences d'affichage entre Safari (parfait ; j'en profite pour préciser que je suis sur Mac), Firefox (moyen) et Eplorer (catastrophique).
- le cadre qui devrait entourer les articles entièrement n'encadre que le titre et la date chez IE ;
- les modules sont décalés tout en bas sur IE ;
- l'image (hébergée chez over-blog) de l'en-tête n'apparaît pas sous IE ;
- la deuxième couleur entourant le texte des modules n'apparaît pas sous Firefox et IE ;
- les pieds d'articles dépassent du cadre sur IE, "ajouter un comm", "commentaires", et "recommander" n'étant pas alignés.

Un grand merci d'avance si tu as des solutions à me proposer !!!!

Francisek 10/10/2006 23:09

 J'ai regardé avec IE6 et FireFox (sur PC), l'affichage semble correct la plupart du temps.les articles sont bien encadrésPas de décalage des modulesl'image d'entête est affichéepour la 2eme couleur des modules, il manque le # devant le code de la couleur de fond dans .box-contentpour les pieds d'article, ajoute position:relative dans la classe .OptionLes liens sont biens alignésCela dit, c'est IE et FireFox PC, IE Mac est normalement bien plus respectueux des normes que sont homologue windowsien, mais son moteur est plus ancien.

Pascaly 07/10/2006 23:16

en plus de ma question précédente sur l'emplacement de #articleAccueil td{text-align:center}
je me suis rendue compte que plusieurs choses clochait sur firefox ( en plus du non centrage de mon texte dans le tableau d'accueil)
- certaines phrases ou titres n'ont pas la même couleur
- les traits de soulignage sont énormes
- certains liens ne sont pas soulignés ...
bref, rien ne va plus sous firefox !!

re-re-merci d'avance

Francisek 08/10/2006 20:16

 Pour les couleurs, tu n'utilises pas une couleur de la Palette standard des 216 couleurs Web, le rendu à l'identique n'est donc pas garanti.Sous Firefox, le trait de soulignement est proportionnel à l'épaisseur de la police. Ca fait partie du moteur de rendu du navigateur.un exemple, pour moi, tous les liens sont soulignésJe vois aussi une différence de taille de police du texte en rouge sur les commentaires, certainement due à l'utilisation de x-small comme taille de police qui n'a pas les mêmes valeurs pour les différents navigateurs.

Pascaly 07/10/2006 11:10

j'ai recherché article accueil dans mon css mais je ne l'ai pas, j'ai seulement
.article { margin-top:10px; padding:0px; }
.article p { padding:0px 0px 5px 5px; margin:0px; }
j'imagine que ça n'est pas là, alors où faut-il le rajouter ??

encore merci

Francisek 08/10/2006 20:00

 Tu peux le rajouter après ces deux lignes.