[abandonné] Clause "Else" dans un commentaire conditionel

Bonjour à tous.

Dans le cadre d'un dev, je me retrouve fasse au besoin de présenter du code HTML spécifique à IE. Je m'explique, je souhaite superposer deux images (celle du dessus est un PNG avec transparence)

J’ai donc une image appelée de cette manière :

<img src="images/masque.png" alt="" name="masque" width="554" height="176" id="masque" />

J’ai ensuite une déclaration CSS permettant d'afficher en fond l'image à habiller.

Jusque ici çà va, çà fonctionne partout sauf sous IE bien sur.

Donc j'importe ensuite une feuille de style complémentaire pour IE via commentaires conditionnels.

Mais le hic c'est que pour que çà fonctionne, je dois afficher le code de cette manière pour IE :

<img src="images/spacer.gif" alt="" name="masque" width="554" height="176" id="masque" />

Outre le fait que je n’aime pas cette solution il semble qu'il ne soit pas possible d'utiliser une clause "Else" dans le cadre des commentaires conditionnels.

Je pensais à faire la substitution coté serveur, mais après avoir lu différents postes sur "la discrimination" des navigateurs, il semble que cette solution ne soit ni fiable, ni intelligente.

Je me trouve quelque peux dans une impasse...

Avez-vous une idée à ce sujet ?

Je suis prêt à reprendre mon code, voir si possible même à ne pas utiliser "<img src" pour intégrer ces images..

Merci
Modifié par ernstein (25 Sep 2005 - 22:52)

Bonjour,

si tu veux rendre conditionnelle l'image masque.png, il faut en faire elle aussi un arrière-plan CSS, superposé au véritable arrière-plan via un positionnement relatif ou absolu de sa boîte.

grosso-modo, quelque-chose comme :

CSS "normale" :

#masque {
background-image: url(background.png);
height: 176;
width: 554;
}
#png {
background-image: url(masque.png);
height: 176;
width: 554;
position: relative;
top: -161px;
}

avec comme CSS conditionnelle pour IE :

#png {
background-image: url(spacer.gif);
}

et en HTML:

<div id="masque"></div>
<div id="png"></div>

Pas très enthousiasmant, mais jouable.

Merci laurent je vais explorer cette piste...

Bon, et bien... je vais laisser tomber cette manipe...

en espérant que IE7 sera capable d'afficher du PNG24.

merci A+

J'ai peut etre une idée. Tu pourrais peut etre faire un Include, ou une frame sans scrollbar, avec une image en fond, avec l'image que tu met par dessus, peut etre que cela conviendra ?!

@++

Tu fais un if IE d'un côté et de l'autre if !IE et ça roule nan ?

En fait le problème serait de pouvoir faire :

If IE ....
<img src=".....gif" ..
[b]ELSE[/b]
<img src=".....png".
End if

Mais le Else n'existe pas niveau commentaire conditionnels..

En fait la petite méthode présentée ici via javascript fonctionne mais elle occasionne un décallage du bloc immediatement à sa droite (flottant).

et comme je suis nul en JS, je ne sais pas si il est possible de le modifier.

Car avec ce script il est alors possible de simplement utiliser une balise img pour appeler l'image.
Modifié par ernstein (26 Sep 2005 - 08:26)

Oui, bah

if BOOL
else

et
if BOOL
if !BOOL

c'est équivalent

Donc ton code :

if IE
<img src="....gif" />
if !IE
<img src="....png" />

Bonjour,

Non. On ne peut pas utiliser validement les commentaires conditionnels pour masquer du contenu à IE en le laissant apparaître dans les autres navigateurs.

Il y a deux types de commentaires conditionnels, et seul l'un des deux est valide.

- Les commentaires conditionnels downlevel-hidden sont valides en HTML. Leur contenu n'est lu que par IE (ou telle version de celui-ci en fonction de la syntaxe précise):

<!--[ if [i]expression[/i]]> ... <![ endif]-->

expression peut être une négation du type !IE 6, mais cette condition étant placée dans un commentaire SGML, elle ne sera ni lue ni traitée par un autre navigateur qu'IE. La négation ne permet donc de distinguer qu'entre des versions d'IE.

- Les commentaires conditionnels downlevel-revealed, à l'inverse, sont lus par tous les navigateurs. Ils peuvent masquer le contenu à IE à l'aide d'une condition négative... mais ils sont invalides en HTML:

<![ if expression]> ... <![ endif]>

En effet, ce n'est pas la séquence de caractères <! qui définit un commentaire. Mais les tirets placés dans celle-ci. Les navigateurs conformes lisent donc bien le contenu ouvert par la séquence <!... et tombent immédiatement sur la syntaxe inconnue car propriétaire qui sert à exclure IE : [ if !IE]. Dans la pratique, on obtient bien le comportement attendu dans Opera et Firefox pour une page traitée en HTML, mais au prix d'un code invalide... et sans garantie qu'il soit reconnu à tous les coups par tous les agents utilisateurs
Modifié par Laurent Denis (26 Sep 2005 - 08:41)

Voilà qui va me conforter dans mon choix de ne pas utiliser cette méthode...

Par contre je reste vraiment baba devant les possibilités offertes par l'utilisation de PNG 24 bits dans le design Web...

Mais une fois de plus cela reste une préoccupation de détails "cosmétique" souvent très éloignée de la notion de contenu.

Donc pas trop grave en somme

J’espère juste qu’IE7 permettra l’usage de ce type de fichier nativement, il faut aller de l’avant….

Merci à vous

Re-bonjour,

Par curiosité : quel problème as-tu rencontré avec le bidouillage CSS que j'avais improvisé plus haut ?

(J'avoue ne pas du tout avoir le temps de tester actuellement ce genre de chose).

En fait dans le cadre de la "mise en page" sur laquelle je travaille, il se trouve que le bloc en question flotte à gauche à côté d'une liste<ul>.

J'ai supprimé la balise <img src="" /> avec laquelle j'appelais le masque PNG pour finalement utiliser deux div histoire de tester, j'ai rencontré des problèmes de superposition et de décalage...

Mais la galère vient à mon sens de la mise en page et non de ton idée.

je vais prendre tu temps en parallèle pour valider cette méthode car je risque d'en avoir besoin pour l'extranet d'un client.

Tu puis le coup du gif transparent de 1pixel étiré me donne vraiment l'impression de faire du grand n'importe quoi. Voir de revenir en arrière sur des méthodes exécrables qui ont faits leurs temps.

ernstein a écrit :
En fait dans le cadre de la "mise en page" sur laquelle je travaille, il se trouve que le bloc en question flotte à gauche à côté d'une liste<ul>.

J'ai supprimé la balise <img src="" /> avec laquelle j'appelais le masque PNG pour finalement utiliser deux div histoire de tester, j'ai rencontré des problèmes de superposition et de décalage...

Mais la galère vient à mon sens de la mise en page et non de ton idée.

Aïe, en effet. En plaçant une div dimensionnée et en position relative à côté d'un flottant, tu cumules déjà a priori deux bugs d'IE Windows :

1. En remplaçant l'image <img> par une <div> dimensionnée : three pixels jog version avec layout, qui te crée un décalage de 3 pixels entre la div et le flottant. Une marge négative peut éventuellement permettre de le compenser.

2. La seconde div dimensionnée et en position relative : second bug lié au layout qui fait que son déplacement sera calculé à partir de la limite de marge du flottant et non de la limite de padding du conteneur parent. Ce bug peut être évité en passant par des positions absolues au lieu de positions relatives... si IE ne rencontre pas de nouveaux problèmes en buttant sur les dimensions de l'élément parent, ou sur le placement du flottant dans ce contexte.

D'autres bugs peuvent s'y ajouter, selon le détail de ton code, comme la position du background qui se réfère à la limite de padding et non à la limite de bordure pour un élément dimensionné...

Bref, ce n'est effectivement pas le cas de figure idéal pour mettre en oeuvre cette méthode

ernstein a écrit :

Tu puis le coup du gif transparent de 1pixel étiré me donne vraiment l'impression de faire du grand n'importe quoi. Voir de revenir en arrière sur des méthodes exécrables qui ont faits leurs temps.

Est-il encore nécessaire dans le cas de background CSS ? J'avoue ne pas trop visualiser les choses, là.
Modifié par Laurent Denis (26 Sep 2005 - 10:19)

non effectivement avec ta méthode il n'y a plus besoin du gif...

je vais tester la marge négative ce soir....

je vous tiens informé.