Les commentaires conditionnels de I.E

[Nissone]

Bonjour,

je découvre que l'on peut faire ça :

div { padding:1px }
<!--[if IE 5]>
<style type="text/css">
div { padding:3px }
</style>
<![endif]-->

Je voudrais juste savoir si c'est bien, c'est propre, ça marche partout et sans surprise... Bref, une contre-indication ?

[LaurentDenis]

Il n'y a pas de contre-indication dans l'absolu à l'utilisation des comentaires conditionnels permettant de réserver du code aux différentes versions d'IE.

En revanche, ton code est un mélange un peu surprenant d'HTML et de CSS.

Les commentaires conditionnels ne s'utilisent pas dans une feuille de style CSS, mais dans le code HTML où ils permettent de cacher le code qu'ils contiennent aux navigateurs non IE.

Le code correct serait donc plutôt pour ton exemple:

<style type="text/css">
   div { padding:1px }
</style>

<!--[if IE 5]>
   <style type="text/css">
      div { padding:3px }
    </style>
<![endif]-->

Cela dit, tout est affaire de choix personnel, AMHA. Je préfère pour ma part :

- éviter les incompatibilités avec IE en laissant du jeu en particulier pour tout ce qui touche au box-model

- laisser la page se "dégrader élégamment" dans IE quand ce n'est pas possible d'obtenir un rendu identique

- utiliser un hack minimal (du type html>body ou !important) lorsque je suis vraiment contraint de préciser deux valeurs différentes pour IE et pour les autres navigateurs.

- ne pas utiliser les commentaires conditionnels qui m'obligent à modifier la source HTML pour des questions de présentation.

Mais ce n'est qu'un choix personnel. L'utilisation des commentaires conditionnels peut être tout à fait justifiée.

Modifié 9 Novembre 2004 par LaurentDenis

[Nissone]

En revanche, ton code est un mélange un peu surprenant d'HTML et de CSS.

<{POST_SNAPBACK}>

Oui, j'ai voulu faire vite !

Parmi les solutions que tu privilégies, les deux premières me séduisent peu, par contre, est-ce que tu peux m'en dire plus sur :

- utiliser un hack minimal (du type html>body ou !important) lorsque je suis vraiment contraint de préciser deux valeurs différentes pour IE et pour les autres navigateurs.

<{POST_SNAPBACK}>

En quoi est-ce que cela peut-être équivalent ? Ce sont des rêgles que IE ne comprend pas et qui me permettent de développer un code pour IE, en précisant, aux autres ces petites modifications que IE ne comprendra pas

[cyrilg38]

je suis assez d'accord. J'aimerai bien en savoir plus sur !important moi aussi stp. J'ai déjà vu ça dans un CSS et je me demande l'interet de la chose.

border : 1px dashed #c9d1dd !important;

[Zipjo]

Peut-être dans le cas où la bordure serait masquée par autre chose ?

[xpatval]

J'ai opté pour une "feuille de style conditionnelle"

 <!--[if IE]>
<link href="ie_feuille.css" rel="stylesheet" type="text/css">
<![endif]-->

Why not ?

xpatval

[Sylvain Trovalet]

J'ai opté pour une "feuille de style conditionnelle"

 <!--[if IE]>
<link href="ie_feuille.css" rel="stylesheet" type="text/css">
<![endif]-->

Why not ?

xpatval

<{POST_SNAPBACK}>

Tu risques de doubler ton temps de travail.

De plus pour profiter à fond de ta feuille CSS IE tu risques de rajouter du code non standard.

M'est avis qu'il est plus important que coder standard et de faire des hacks dans les cas extrêmes.

[cyrilg38]

je suis assez d'accord

[xpatval]

Disons que j'ai pris le parti de feuilles externes, par pur souci d'esthétisme personnel.

Ma feuille de style "conditionnelle" est peu chargé (ajout d'un scrollbar personnalisé ie, d'une hauteur de div qui n'est pas pris en compte par 3 autres navigateurs...), et m'évite de modifier chaque page.

Ce qui n'empêche pas d'être validé css.

xpatval

[Sylvain Trovalet]

scrollbar personnalisée IE validée (j'en doute) ??

Tu vois tu commences déjà à mettre des trucs non standard.

[xpatval]

La feuille de style "conditionnelle" ne peut être validée, bien entendu.

Mais celle qui fait office de base pour chaque navigateur, oui.

Bien sur que le scrollbar, le cursor: hand; etc, ne peuvent l'être. Mais ça, c'est un autre débat, qui ne trouve pas sa place ici, (je parle de certaines différences d'implémentation de style entre les navigateurs, ccs2, de la prépondérence ou du monopole de IE, et de la volonté de vouloir à tt prix être d'équerre pour chaque browser, enfin bref, c'est un avis perso.)

xpatval

PS: malgré cela, nous pouvons débattre...

[LaurentDenis]

je suis assez d'accord. J'aimerai bien en savoir plus sur !important moi aussi stp. J'ai déjà vu ça dans un CSS et je me demande l'interet de la chose.

border : 1px dashed #c9d1dd !important;

<{POST_SNAPBACK}>

Ce hack a été récemment popularisé par Trenton Moss ( http://www.evolt.org/article/Ten_CSS_trick..._know/17/60369/ ), et critiqué par Tantek Celik ( http://tantek.com/log/2004/09.html#d07t1434 ). Pour un aperçu de tout cela en français, voir http://blog-and-blues.org/weblog/2004/09/0...ossible-pour-ie , et en particulier les commentaires d'Eric Daspet.

Le principe : IE a un bug qui fait qu'il ne respecte pas la prépondérance de !important quand une même propriété CSS est répétée dans la même règle. On peut ainsi spécifier deux valeurs, l'une pour IE, et l'autre pour le reste du monde (en principe) :

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

- IE "oublie" le !important et applique la dernière occurence de la propriété (couleur rouge).

- les autres navigateurs respectent le !important et applique la propriété auquel il est appliqué (couleur verte)

Le problème : un !important dans une CSS auteur l'emporte sur une règle "normale" d'une CSS utilisateur. L'utilisateur doit lui-même ajouter !important à sa propre feuille de style user pour surclasser le style auteur. Ce serait un peu gênant pour l'accessibilité... dans une certaine mesure (le premier principe d'une CSS user est de mettre des !important partout où... c'est important ).

Modifié 19 Novembre 2004 par LaurentDenis

[LaurentDenis]

Tu risques de doubler ton temps de travail.

De plus pour profiter à fond de ta feuille CSS IE  tu risques de rajouter du code non standard.

M'est avis qu'il est plus important que coder standard et de faire des hacks dans les cas extrêmes.

<{POST_SNAPBACK}>

Dans ce domaine, j'aime beaucoup cette réflexion d'Arve Bersvendsen, qui pratique justement le moins possible les hacks... et souvent les commentaires conditionnels :

Si je veux obtenir un effet graphique donné, je cherche toujours comme il peut être obtenu sans entraîner aucun code invalide. Si je n'y parviens pas sans invalider soit ma CSS, soit mon balisage, je fais un test rapide :

Cet effet se dégrade-t-il gracieusement ? Si c'est le cas, je le réalise sans les hacks.

S'il ne se dégrade pas gracieusement, je me demande quel bénéfice vont en tirer mes visiteurs. Si le bénéfice est insuffisant, je finis généralement par le laisser tomber.

Si le bénéfice est plus grand que le "coût" de mon hack, je choisis le hack avec le plus de soin humainement possible.

En pratique, la combinaison de ces trois points signifie généralement que je réalise un hack pour Internet Explorer, et que je le place dans une feuille de style distincte, cachée aux autres navigateurs.

( http://www.blog-and-blues.com/2004/mars/13..._philosophy.asp )

[LaurentDenis]

J'oubliais une lecture passionante sur les hacks : le billet À propos de la popularité des hacks de l'ami Denis Boudreau, et les abondants commentaires qu'il a suscité.

[xpatval]

Cette discussion est très intéressante, mais, excusez mon humble avis, je la trouve extrêmement perfectionniste.

Pour résumer un tant soit peu:

Je dois concevoir un site pour un client. Soit.

Je n'ai pas la science infuse, mais mon passif me permet d'en construire en respectant (*) les normes, ce qui est je le pense une bonne chose.

Je teste sous 4 browseurs différents, par soucis d'uniformisation.

Je teste sur PC et Mac.

Je teste en haute et basse résolution.

Je teste en bas et haut débit.

Je teste avec mon café, et avec mon apéro.

Je code de façon à ce que le contexte du site soit rendu au mieux dans chaque browser, sans éviter les disparités inhérentes aux moteurs des navigateurs.

Maintenant, j'utilise les hacks(*) car IE est susceptible d'apporter parfois un plus, et inversement.

Le cursor:hand est amusant, trouve-je. Il pousse le visiteur à s'intéresser à un mot, une phrase, un contexte, en particulier. Et pourtant, je hacke pour qu'il soit défini.

C'est un exemple, court, simple, mais un exemple parmi tant d'autres.

Est-ce pour autant que j'invalide, on va dire psychologiquement parlant, mon site ?

Mon code n'est plus standard au regard des normes du W3C.

Mon code, ou les autres navigateurs qui n'ont pas encore implementé ce style ?

CSS2.1 propose certains styles qui ne sont implentés par aucun browser (je pense à text:shadow, par exemple). Alors, qui est vraiment invalide ?

Bonjour l'arrivée, si un jour il arrive, du CSS3...

Jusque là, les blogs et post se feront tjrs aussi nombreux, et les concepteurs de plus en plus chauves...

xpatval