Les Hacks CSS... Proprement

Le CSS (Cascading Style Sheets : feuilles de style en cascade) est le langage utilisé pour mettre en forme les données présentes dans les fichiers HTML et XML. Ce langage a été normé par le W3C, sa version 3.0 est en préparation.

Malgré tout les différents navigateurs web développés par divers organismes ne respectent pas tous ces normes. De ce fait chaque navigateur interprète à sa manière le CSS. Il existe alors deux possibilités pour parer ces différences:

• La première est de ne pas utiliser les propriétés trop litigieuses (tel que padding). C'est celle qu'il faudrait utiliser pour la propreté et l'accessibilité de votre site.

• La seconde est l'utilisation de hacks CSS. Le principe de base est assez simple: les navigateurs ne parsant pas de la même manière les fichiers, nous pouvons leurs tendre des pièges, certain tomberont dedans, d'autre non. Permettant ainsi une séparation et donc l'application de propriétés différentes.

Le problème de la première méthode est la restriction importante des possibilités offertes par le CSS et donc elle est très peu utilisé. Le problème de la deuxième est la création d'une feuille de style éronnée pouvant poser des problèmes complexes et détruire la présentation sur les versions futures des navigateurs.

Je vais donc vous proposer quelques solutions pour résoudre le problème en évitant ces dérangements.

1. Les Commentaires Conditionnels

L'utilisation de commentaires conditionnels parfaitement valide et reconnus par Internet Explorer permet de filtrer ce navigateur des autres:

Les conditions positives permettant de filtrer un navigateur précis

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

Les conditions négatives permettant d'exclure un navigateur précis

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

Ces balises, incluses dans un commentaire, ne posent pas de problème donc pour la validité du code. La "version" est à remplacer par la version d'Internet Explorer que l'on souhaite filtrer. Il est possible de filtrer toutes les versions inférieures ou supérieurs ... Mais nous ne nous attarderons pas sur ces détails.

Puis il suffit simplement de remplacer le code HTML par du CSS ou l'appel d'un fichier externe.

3. !Important

Rajouter "!important" à la fin d'une propriété directement dans le code CSS permet de donner plus d'importance à celle-ci. Puisque le style prend en compte la dernière propriété donnée le fait de placer ce mot outrepasse cette directive. Mais internet explorer ne le prend pas en compte. Ainsi le code :

p{ color: red; color: blue !important; color: green; }

Les paragraphes seront bleus sur la plupart des navigateurs, mais sur IE ils seront  verts. Cette propriété est valide.

2. La Méthode JavaScript

Plutôt que d'essayer d'adapter une feuille de style pour plusieurs navigateurs on peut développer une feuille de style pour chaque navigateur. Pour cela on utilise navigator.appName qui retourne le nom du navigateur.

document.write("Nom : " + navigator.appName);

Attention plusieurs peuvent répondre avec le même nom comme chrome et Firefox qui répondent "Netscape". Pour plus de précision, la méthode "navigator.userAgent" est plus précise. Vous pouvez vous aider du script présent sur quirksmode.org pour élaborer votre script de détection.

3.La Méthode PHP

Même principe que précédemment sauf qu'au lieu de tester en local, vous pouvez générer la page et le CSS directement en fonction des informations envoyés par le navigateur lors de la requete de la page. Pour cela, utilisez la variable prédéfinie $_SERVER['HTTP_USER_AGENT'] et construisez votre site en conséquence.