0

Les commentaires conditionnels

Bonjour les amis.

Qu’y a-t-il de plus magique que de développer son site web sous Firefox ou Chrome ? Quand tout se passe bien et que tous les éléments viennent s’imbriquer parfaitement les uns dans les autres, tel un chef-d’œuvre de Marc Dorcel.
Mais, il arrive parfois que les choses se compliquent lorsque vous ouvrez votre site dans Internet Explorer. Tout en sachant bien évidemment que IE nous a gâté en nous offrant pas moins de 4 versions à tester…

Une technique très simple permet l’utilisation d’un bout de code, appelé « hack », à rajouter dans votre CSS, afin qu’il ne soit lu et compris que par un seul navigateur.

Par exemple:

#maDiv {
   float: left;
   margin-top:10px
}
*+html #maDiv{
   float: left;
   margin-top:20px
}

Ici, le *+html va nous permettre de cibler uniquement IE7. Il sera le seul à comprendre ce texte et donc à l’interpréter.

A première vue, un simple « hack » CSS est suffisant pour les sites relativement simple à intégrer.
Notez toutefois que les différences d’interprétation entre navigateurs ne doivent pas être aberrantes. Si votre code est normalement constitué et qu’il respecte les règles d’interprétation de base, votre site devrait apparaitre de façon relativement normale, y compris sur IE. Les problèmes d’affichage sont bien souvent liés à l’interprétation des tailles, notamment en ce qui concerne les padding et les margin.
Quoi qu’il en soit, si votre site est complètement détruit d’un navigateur à l’autre, je pense qu’il faudra avant tout passer par une étape de révision de vos fichiers.

Bref, le hack CSS est donc une solution rapide à mettre en place, mais qui peut vite s’avérer lourde si beaucoup d’éléments sont concernés, encore plus si les interprétations sont différentes entre Firefox, IE7 et IE8 par exemple.
De plus, même si cela parait peu probable, nous ne sommes jamais à l’abri que le navigateur soit mis à jour et n’interprète plus notre hack.

Pour éviter les déchets de code, et toujours dans le but de coder le plus proprement possible, il existe une autre solution, les commentaires conditionnels.

Un commentaire conditionnel, c’est quoi ?

En fait, tout est dans le nom… C’est un commentaire qui va vous permettre de conditionner votre page. Mais vu qu’un exemple vaut bien mieux qu’un long discours, regardez la suite :

<link href="/mon_fichier_CSS_de_base.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]>
   	<link rel='stylesheet' href='/mon_fichier_CSS_pour_IE7.css' type='text/css' />
<![endif]-->
<!--[if IE 8]>
   	<link rel='stylesheet' href='/mon_fichier_CSS_pour_IE8.css' type='text/css' />
<![endif]-->

Grâce à cette structure, vous allez pouvoir indiquer au navigateur de charger le fichier CSS adéquat en fonction de la version de navigateur.

Ok, ok, ta solution, elle est pas mal, mais ça oblige à faire autant de fichier CSS que de versions testées, et en plus, ça multiplie le nombre de requêtes serveur juste pour charger du CSS.

Comme me dirait mon banquier, je comprends votre inquiétude mais on va trouver une solution.

Et la solution est plutôt simple finalement. Tadam :

<!--[if IE 7]>
   <body class="ie7">
<![endif]-->
<!--[if IE 8]>
   <body class="ie8">
<![endif]-->

Je pense que vous avez saisi l’astuce !

Plutôt que de charger plusieurs styles CSS, on applique une classe au <body> afin de pouvoir le différencier en fonction des versions de navigateur.
Il vous suffira ensuite de cibler en CSS vos éléments grâce à cette classe.

body.ie7 #maDiv {
   float: left;
   margin-top:10px
}
body.ie8 #maDiv{
   float: left;
   margin-top:20px
}

Adieu les hacks, bonjour les conditions !
Si vous avez d’autres astuces du même type, n’hésitez pas à les partager via les commentaires.

A bientôt les amis.

A propos de Romuald

Romuald a écrit 23 articles sur le blog.

Les amis de nos amis sont nos amis, alors partageons !

Laissez un commentaire





Si vous êtes un vrai développeur, vous devez savoir compter.
Alors on vous met au défi !
Si vous réussissez cette épreuve, nous nous ferons une joie de lire votre commentaire.