Bonjour,
Ahem... Il y a quelques confusions dans ce sujet
Pour la syntaxe des commentaires conditionnels, voir la
FAQ du forum et
cet article pour approfondire): la syntaxe indiquée par streetpc est correcte (aux espaces près, ajoutés ici pour éviter un bug de rendu dans le forum). Il ne faut justement pas refermer le commentaire au mauvais endroit en écrivant
<!--[ if IE ]-->
Pour les deux feuilles de style de donfino : on évite dans la plupart des cas cette démarche consistant à définir des feuilles complètes différentes pour chaque navigateur. Ceci poserait par exemple un problème amusant face à IE7, pour lequel :
- la feuille pour IE6.0 ne conviendra pas, étant donnée les diverses corrections de bugs CSS qu'il comporte
- la feuille "navigateurs conformes" ne conviendra pas forcément non plus, si ces corrections ne le rendent pas suffisamment conforme (exemple immédiat: le support de height / min-height)
Il est plus rentable d'écrire une feuille complète pour tous les navigateurs (conformes et non conformes), et d'y ajouter une feuille apportant seulement les quelques corrections nécessaires pour IE. On utilise alors les commentaires conditionnels pour réserver la lecture de ce correctif à IE. Et différencier le moment venu les éventuelles corrections propres à IE7.
C'est l'exemple donné par streetpc, auquel il faut cependant enlever les attributs
title. Ceux-ci ont un rôle bien spécifique dans les <link rel="stylesheet"> (styles alternatifs et préférés, styles permaments, voir
cet article ). On évitera également d'adresser le correctif à IE7, pour lequel il ne sera pas adapté. On écrira donc :
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
<!--[ if lte IE 6]>
<link rel="stylesheet" media="screen" type="text/css" href="ie_supplements.css" />
<![ endif ]-->
Cela dit, pour faire passer au contraire 2 feuilles
complètes comme cherche à le faire donfino, on pourra utiliser par exemple :
<link type="text/css; charset=ISO-8859-1" rel="stylesheet" ... />
<!--[ if lte IE 6]>
<link rel="stylesheet" ... />
<![ endif]-->
La première feuille sera ignorée par IE Windows 5.x-6.0, qui ne lira que la seconde. Et il est très probable qu'IE7 reproduira le comportement d'IE6.0 dans ce cas : il n'aura alors aucune feuille de style avec le code ci-dessus, mais un second commentaire conditionnel permettrait de lui en adresser une rien que pour lui
A noter également : IE5 Mac ignorera les deux feuilles de styles.
Mais on peut aussi jouer seulement sur les commentaires conditionels:
<!--[ if IE 7]> <-->
<link rel="stylesheet" ... />
<!--> <![ endif]-->
<!--[ if lte IE 6]>
<link rel="stylesheet" ... />
<![ endif]-->
(Supprimer l'espace qui suit chaque crochet ouvrant, ajouté ici pour éviter le bug d'affichage du forum. Attention en revanche à respecter exactement les balises de commentaires SGML).
La première feuille sera lue par tous les navigateurs à l'exception d'IE 5.x et 6.0 Windows. IE7 la lira également (Pour devancer une question probable :
oui, cette partie contient un
if IE7, mais
non, celui-ci n'aura aucun effet sur Firefox, Opera, Safari, etc qui liront eux aussi la feuille de style. Voir les explication dans
cet article).
La seconde feuille ne sera lue que par IE5.x et 6.0. Ni les Firefox, Opera, Safari etc, ni IE7, ne la liront.
Le moment venu, il sera possible d'ajouter une 3e feuille uniquement corrective pour IE7 en cas de besoin...
Pour ceux qui testeraient ce code avec une beta1 ou une pre-beta2 d'IE7 standalone: penser à réactiver les commentaires conditionnels
(voir
ce billet )
Enfin, il est assez périlleux de se lancer dans ce genre de choses sans avoir les bases nécessaires en HTML
Pour répondre à la question de donfino ci-dessus : les commentaires conditionnels sont des commentaires HTML, qui se placent dans le code HTML, à l'emplacement normal du code HTML qu'ils contiennent.
Quand on les utilise pour lier des feuilles de styles, le code se place dans la section <head>...</head>, comme pour n'importe quel autre <link rel="stylesheet">.
Modifié par Laurent Denis (01 Feb 2006 - 10:09)
