Optimisation png pour IE - commentaires conditionnels

Bonsoir à tous !
Je suis actuellement en pleine conversion d'un design psd vers css/xhtml. Je ne rencontre pas vraiment de soucis et pour ce qui est des défauts d'affichage sous ie, j'utilise des commentaires conditionnels pour les styles css.
En gros, je change d'image de fond (background) des blocs div en fonction du navigateur. Ainsi il y a des png transparent pour firefox et compagnie et pour ie, je remplie ce fond transparent par la couleur choisis pour s'intégrer au reste du contenu (les img exclusives ie sont un peu plus lourde, mais c'est le prix à payer pour une plus large compatibilité).

Mais je souhaiterais utiliser ces commentaires hors de la zone head. Concrètement j'ai également des img affichés en dur et donc sans propriétés dans le .css et je souhaiterais changer l'image toujours en fonction d'ie.

j'avais pensé à cela :

<!--[if lt IE]>
<img src="imgie.png" /> Cette img sera affiché que par IE.
<![endif]-->
<![if !IE]>
<img src="img.png" /> Cette img sera affiché par tout le monde sauf pour IE.
<![endif]>

Mais j'ai de gros doute sur la validation W3C. En faite je suis certains que je vais me taper un avertissement donc je n'ai pas testé cette manip.
Quelqu'un pourrait-il m'aiguiller ?
Merci !
Modifié par Uggie (05 Oct 2009 - 23:29)

Salut,

Uggie a écrit :
Mais j'ai de gros doute sur la validation W3C. En faite je suis certains que je vais me taper un avertissement donc je n'ai pas testé cette manip.
Quelqu'un pourrait-il m'aiguiller ?

Euh... le plus simple aurait été d'essayer : personne à ma connaissance n'est mort à la suite d'un avertissement du validateur W3C !

En l'occurrence il n'y a aucune raison d'en avoir un. Le seul problème (qui n'en est peut-être pas un pour toi) est que c'est un peu lourd puisqu'il ne faut cibler que les versions d'IE < 7 :

<!--[if !IE]> <-->
<img src="image.png" alt="" />
<!--> <![ endif]-->
<!--[if gte IE 7]>
<img src="image.png" alt="" />
<![ endif]-->
<!--[if lt IE 7]>
<img src="image.gif" alt="" />
<![ endif]-->

J'ai rajouté un espace après les crochets ouvrants des [ endif] pour qu'ils ne soient pas interprétés comme du BBCode.

Heyoan a écrit :
Le seul problème (qui n'en est peut-être pas un pour toi) est que c'est un peu lourd puisqu'il ne faut cibler que les versions d'IE < 7 :

Cela dit, on peut simplifier le code, comme suit :

<!--[if gte IE 7]> <!-->
<img src="image.png" alt="" />
<!--> <![ endif]-->
<!--[if lt IE 7]>
<img src="image.gif" alt="" />
<![ endif]-->

Bonjour,

un commentaire HTML commence par <!-- et se termine par --> surtout quand c'est le validateur qui analyse.
Donc tu peux placer le code le plus pourri dans un commentaire conditionnel, ce sera valide du point de vue du validateur du W3C. Par contre le code envoyé à IE/interprété par IE ne sera pas valide dans ce cas, c'est à la fois valide pour le W3C et invalide pour IE. Ou valide pour les deux si tu fais correctement les choses mais ça le W3C ne te le dira pas : c'est pas son problème qu'un navigateur interprète un contenu présent dans un commentaire HTML.

EDIT: si quelqu'un a le lien ou voit de quoi je parle ... y a un webdesigner qui s'est amusé à utliser des dizaines de CC "pour IE" et "tous sauf IE" pour un double design : IE ne voit qu'une mise en forme en tableau <table> <tr> et <td> alors que les autres voient des <div>.
Ça ne sert évidemment à rien à part pour la performance (les div ne sont pas l'équivalent de cellules de tableau pour commencer) mais c'est impressionnant quand même ^^
Modifié par Felipe (06 Oct 2009 - 12:38)

Salut,

Felipe a écrit :
si quelqu'un a le lien ou voit de quoi je parle ... y a un webdesigner qui s'est amusé à utliser des dizaines de CC "pour IE"

Tu parles de http://www.cssplay.co.uk/ ? Avec ses menus déroulants par exemple :
http://www.cssplay.co.uk/menus/dd_valid.html

Victor BRITO a écrit :
Cela dit, on peut simplifier le code, comme suit : ...

Ben sauf erreur de ma part en faisant comme ça on n'a plus aucune image pour les navigateurs non IE...
Modifié par Heyoan (06 Oct 2009 - 20:20)

Heyoan a écrit :
Ben sauf erreur de ma part en faisant comme ça on n'a plus aucune image pour les navigateurs non IE...

Si, on a l'image PNG, puisque la première partie de la condition est suivie de la balise de fermeture de commentaire (le ! en surplus permet d'éviter aux versions d'IE ciblées d'afficher un <-->).

Victor BRITO a écrit :
Si, on a l'image PNG, puisque la première partie de la condition est suivie de la balise de fermeture de commentaire (le ! en surplus permet d'éviter aux versions d'IE ciblées d'afficher un <-->).

Ah OK : je n'avais pas vu la subtilité.

Merci pour l'astuce.