Commentaires conditionnels pour IE

Mardi 12 décembre 2006

À cause de sa faible prise en compte des standards web, Internet Explorer (que j'abrégerai par la suite en IE) fait l'objet de nombreux hacks CSS (J'en use et abuse parfois, voir l'article Des règles CSS pour un résultat identique selon le navigateur).

L'inconvénient de ces hacks CSS, c'est qu'ils utilisent des failles connues des navigateurs et vous n'êtes pas à l'abri qu'elles soient corrigées dans une version supérieure.

Avec la diffusion massive d'IE7 (que le logo est moche!) qui résout certains bugs de la version 6 et rend inopérant certains hacks CSS (star-html, tantek, selecteurs parent et adjacent entre autre), on se rend compte (j'aurais mis le temps!) qu'il faut éviter les hacks CSS et préferer les commentaires conditionnels.

Qu'est-ce que c'est?

Les commentaires conditionnels sont des commentaires HTML spécifiques qu'IE sait interpréter contrairement aux autres navigateurs.

Comment ça marche?

Les commentaires conditionnels existent sous 2 formes: positive ou négative.

Les commentaires conditionnels positifs exposent leur contenu seulement aux navigateurs pour lesquels la condition est vérifiée (Cela sous-entend les versions IE de la condition).

Les commentaires conditionnels négatifs exposent leur contenu aux navigateurs pour lesquels la condition n'est pas vérifiée (autrement dit, tous les autres navigateurs: Firefox, Safari, Mozilla... ET les versions d'IE qui n'entrent pas dans la condition).

Syntaxe

La syntaxe d'un commentaire conditionnel positif est:

HTML

Et celle d'un commentaire conditionnel négatif est:

HTML

<![IGNORE[]]> HTML

condition est une des conditions suivantes:

IE : Toutes versions d'IE
lt IE version: Toutes versions d'IE inférieures à version
lte IE version: Toutes versions d'IE inférieures ou égales à version
IE version: Seulement la version version d'IE
gte IE version: Toutes versions d'IE superieures ou égales à version
gt IE version: Toutes versions d'IE superieures à version

version est la version d'IE ciblée: 5, 5.5, 6 ou 7.

HTML est le code HTML qui sera interprété par le navigateur selon que la condition est vérifiée ou non. Quand le code HTML est interprété par le navigateur, il est placé à droite de l'emplacement du commentaire dans le flux du document.

Aller plus loin

Dans le cas où vous souhaitez faire un commentaire conditionnel négatif dont la condition s'applique à IE en général et pas à une version précise, vous pouvez utilisez le code suivant, plus simple:

HTML

HTML

Il est bon de préciser que la syntaxe des commentaires conditionnels négatifs est susceptibles de provoquer des erreurs de parsing dans un document XHTML traité en tant que XML. Traduction: cette syntaxe n'est pas valide XHMTL.

Quelques liens traitant du sujet

Conditional comments [En] sur CSS Hacks
Les syntaxes de commentaires conditionnels pour IE Windows [Fr] sur Blog & Blues.
Qu'est-ce que les commentaires conditionnels? [Fr] sur le forum Alsacreations.
La documentation officelle [En] sur MSDN Microsoft

par Peut-êtreUneRéponse publié dans : CSS
ajouter un commentaire commentaires (3)

Retour à l'accueil Suivant : Quelques pistes pour un design 2.0