Adapter son CSS aux spécificité des navigateurs
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):
/* Masque la ligne suivant pour IE Mac \*/
selecteur {color:#00c;}
/* IE5 Mac croit que la ligne précédente est dans le commentaire */
selecteur {color:#c00;}
/* */
selecteur {color:#c00;}
}
color:#c00;
* color:#0c0;
}
color:#c00;
color: /**/#0c0;
}
color:#c00;
color: expression('0c0');
}
color: #c00 !important;
color:#0c0;
}
_color:#0c0;
}
color:#c00;}