AFFICHER DU PNG~24 DANS MSIE
AFFICHER DU PNG~24 DANS MSIE
Techniques SPIP

Vous trouverez ici des trucs et astuces destinés aux développeurs de sites sous SPIP.

La majorité de ces trucs est consacrée aux filtres graphiques introduits dans SPIP 1.9. Il y a là en effet un vaste champ d’expérimentation pour les webmestres et les graphistes.

Chaque truc est suivi d’un forum auquel nous vous invitons à participer.

N.B. La présence de ces trucs et astuces sur notre site professionnel est destinée à faire connaître notre activité de création de sites sous SPIP. Vous pouvez librement utiliser les morceaux de code fournis ici dans vos propres squelettes. Vous pouvez reprendre ces exemples sur votre site ou dans les forums d’un autre site ; dans ce cas, nous vous demandons simplement d’avoir la courtoisie de référencer la page d’où est tiré le code repris.

XML

[SPIP 1.8] Il est possible de faire afficher des images au format PNG 24 à MSIE, et cela en respectant la transparence (couche alpha). Pour réaliser cela, on applique un comportement (behavior), système propre à Microsoft Explorer, à une feuille de style.

Cela est indispensable, au passage, pour afficher correctement :
— les images typographiques,
— les images passées par certains filtres graphiques de SPIP qui fabriquent de la transparence en PNG 24,
— les fichiers GIF transparents réduits par GD 2 (dans la version 1.9 de SPIP, les images réduites ayant une source transparente sont systématiquement transformées en PNG 24, pour éviter la pixellisation du détourage).

Il suffit, dans son squelette, d’appeler le comportement win_png.htc (fourni, depuis la version 1.8, à la racine de SPIP) :

Si l’on préfère, plutôt que de l’afficher sélectivement à certaines classes, on peut l’appliquer à la balise img dans son ensemble.

Si les images sont surmontées, dans MSIE, du symbole de l’image manquante, c’est que le fichier rien.gif est absent.

N.B. Dans MSIE, la page est chargée avec ses images, puis le comportement s’applique : ainsi, pendant le chargement, la transparence de la couche alpha n’est pas respectée (on voit l’image PNG 24 telle que MSIE l’affiche habituellement, c’est-à-dire très laide) et ensuite seulement la transparence s’applique.

N.B.2. Il ne faut jamais s’étonner de rien avec MSIE : si vous commencez à manipuler des éléments ayant une transparence et à les animer, masquer/dévoiler, avec Javascript, vous finirez forcément par rencontrer des bugs d’affichage de ce côté, avec des éléments qui disparaissent totalement. En règle générale, les animations Javascript (DHTML) et la transparence ne font pas très bon ménage dans MSIE et il faut débugguer longtemps (et, souvent, réduire ses ambitions graphiques).

N.B.3. Initialement, ce petit morceau de code a été intégré à SPIP pour permettre l’affichage des PNG 24 de l’espace privé !

[SPIP 1.9.2] Attention : dans les nouvelles versions de SPIP, la méthode décrite ci-dessous n’est plus nécessaire. Un petit script directement intégré à SPIP déclenche la mise en transparence des PNG 24 sous MSIE sans qu’il soit nécessaire, pour le webmestre, de faire quoi que ce soit.

Pour être certain d’activer ce script dans ses squelettes personnels, il faut cependant bien penser à insérer le raccourci #INSERT_HEAD dans le header du HTML de ses squelettes.

Mai 2006
Afficher du PNG 24 dans MSIE : un petit complément
cy_altern (cy_altern chez yahoo.fr)

Peut être faudrait il préciser qu’il est nécessaire d’indiquer explicitement la largeur et la hauteur (width et height) de l’image sur laquelle on applique cette propriété de style ? (sinon l’image prend la taille de rien.gif, cad 24 x 24 pixels)

Juin 2006
Afficher du PNG 24 dans MSIE
Franz

Salut,

  • J’ai veillé à ce que les attribut width et height soient présents dans les images concernées
  • J’ai veillé à ne pas faire de liens absolus
  • J’ai même appelé le truc directement dans la page et pas dans une css séparée pour être sûr
  • J’ai veillé à ne pas attribuer plus d’une classe css à chaque image
  • ...

et ça ne marche pas :(

Juillet 2006
yes !!!
Valery (vx_lentz chez yahoo.fr)

Hello,

J’ai repris texto les styles en question et ça a fonctionné du premier coup merci !

Juillet 2006
Afficher du PNG 24 dans MSIE
Edouard (edouard chez gmail.com)

bonjour Arno. Est-ce que c’est normal que cela ne marche pas pour mon background ?

j’ai copié/collé en haut de mon habillage.css ce que tu as mis...

et j’ai laissé le win_png.htc à sa place originale...

Je suppose que c’est moi le problème :p héhé...

edouard

Septembre 2006
Afficher du PNG 24 dans MSIE
amaury

Salut,

j’utilise SPIP 1.9.1 et ce serait plutôt dans la définition des classes CSS :

.spip_logos (avec un S)

Septembre 2006
Afficher du PNG 24 dans MSIE
alain (lassalle chez free.fr)

Après avoir appliqué ce filtre il n’est plus possible de redimensionner l’image. Il y a une solution ?

Octobre 2006
Afficher du PNG 24 dans MSIE et validation CSS
erational

salut,

le seul inconvénient de cette technique est que la CSS ne se valide plus car l’élément behavior n’est pas reconnu par le W3c

la bidouille que j’ai trouvé est d’ajouter dans le head, un appel aux fonctions non standards de MSIE dans une feuille séparée

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

le "lte IE 6" signifie "s’applique à toutes les versions de MSIE <= 6". Car il me semble que MSIE 7 gère maintenant bien le PNG 24.

De cette façon, on valide la page (XHTML et CSS) et la transparence passe partout.

Juillet 2007
Afficher du PNG 24 dans MSIE
Arno (naude66 chez hotmail.com)

Bonjour à tous, Cette solution fonctionne-t-elle avec les fonctions "repeat", comme background-repeat par exemple ?!

Cdt.Arno

il y a 5 mois
Afficher du PNG 24 dans MSIE
sauvy (asoubis chez gmail.com)

Bonjour,

Où dois-je mettre : .img_png, .image_typo, .spip_logo behavior : url("win_png.htc") ;

Sans les styles ?

Car dans mon squelette ça marche pas...

Merci

il y a 3 mois
Afficher du PNG 24 dans MSIE
fred
.img_png, .image_typo, .spip_logos {
        behavior: url("win_png.htc");
}

> le bon code à copier (il manque un "s" à spip_logo Arno, j’ai passé une demi-heure à comprendre...

Votre message :
Un message, un commentaire ?

(Pour créer des paragraphes, laissez simplement des lignes vides.)

Qui êtes-vous ? (optionnel)