En 2001 Internet Explorer 6 n’avait toujours pas intégré la transparence du format PNG pourtant sorti en 1995. Cette gestion de la transparence est une des fonctionnalités qui manquent le plus aux web designers…
Parmi les nombreux scripts permettant à IE6 de gérer cette transparence, je vous propose de jeter un oeil sur PNGHack de Yves Van Goethem.
Voir la présentation sur Slideshare.
Articles sur le même sujet
PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour
(Jean Cocteau) ;) Merci d'avance.
Afin de satisfaire le plus grand nombre, j'ai ajouté
un bouton Flattr parce que vous le valez bien ;)
Une erreur s’est glissée : Internet Explorer 6 est sorti en 2001, soit il y a 7 ans, et non 13.
À noter qu’Internet Explorer 6 gère correctement la transparence s’il s’agit d’un PNG 8 bits.
@Victor Brito: Bien vu, j’ai mélangé la sortie du PNG avec IE6 ^_^v C’est corrigé. Du coup j’ai modifié le titre du billet pour éviter la confusion ;)
Mouais. J’utilise le pngfix de jQuery pour les balises img, et le hack CSS pour les images de fond (qui malheureusement ne supporte pas le background-position) donc je n’attends pas grand-chose de ce hack. Je testerai mais j’ai déjà eu tellement d’incompatibilité de javascripts ou de CSS que je suis dubitatif maintenant…
Sauf erreur de ma part, tous les scripts pour obtenir la transparence du PNG-24 (ou PNG-32, on passe parfois d’un nom à l’autre) dans IE6 utilisent le filtre DirectX AlphaImageLoader pour les background CSS, et toujours le même filtre mais sur un DIV (ou autre élément vide) remplaçant l’image d’origine pour les images insérées dans le code HTML.
Donc on retrouve les soucis habituels:
pas de background-repeat, background-position, etc. (vu qu’il ne s’agit pas d’une image de fond…); problèmes de liens cliquables et de texte non sélectionnable.
Plus quelques soucis éventuels de positionnement pour les images remplacées par des DIV ou SPAN.
Au final, et même si certains scripts s’évertuent à contourner ces problèmes, il me semble préférable d’être capable de comprendre le fonctionnement de ce genre de correctifs, de les faire soi-même à la main éventuellement, de savoir contourner les effets secondaires lorsque c’est possible, et de connaitre les limites de la méthode. Bon, en gros il faut être un peu expert pour gérer ça bien… ou bien faire de la dégradation gracieuse et se contenter d’images de fond en PNG-8 pour IE6 (et PNG-24 pour tout le monde sauf lui), ou utiliser des images PNG-24 avec couleur de fond par défaut enregistrée (pour éviter le fond gris moche et lui substituer la couleur opaque de son choix).
Notons que même en étant expert on peut préférer la dégradation gracieuse:
plus simple à mettre en place; sans effets secondaires problématiques (et donc chronophages); sans effets secondaires qui se manifesteraient quinze jours plus tard ou une fois le site mis en production…; IE6 = 20-25% des utilisateurs?
Surpris Je ne m’attendais pas du tout à ce que tu parles de PNGHack. Quelques précisions : quand je me suis lancé dans l’aventure de PNGHack on avait encore beaucoup de mal à faire comprendre aux clients le pourquoi du comment… Le web évoluant rapidement, en cette fin d’année 2008, cette situation est quasiment et heureusement révolue pour moi. Je rejoins donc Florent V qui parle de 25% d’utilisateurs d’IE 6, même si je pense que les sites que je conçois en accueil d’avantage ..
Ce script n’est pas destinés aux newbies, un certain niveau de complexité est désiré afin d’avertir le développeur et lui faire lire la doc.
Je n’ai toujours pas développer PNGHack 2 pour introduire la gestion des background… alors que mes premiers prototypes étaient plutôt concluants.
@Victor Brito : IE 6 ne gère pas non plus correctement PNG 8 (http://www.libpng.org/pub/png/pngintro.html), PNG 8 inclue également la transparence alpha, à l’heure actuelle le seul outil que je recommande à sa création est Fireworks, Photoshop étant toujours très en retard sur la gestion des PNG.
Je rajoutera un petit article de HTMLzengarden pour plus d’infos sur la bonne pratique des images : http://www.htmlzengarden.com/2008/05/le_point_sur_les_formats_d_images/ A notez que GIF semble également poser des problèmes de performance sur IE 7, alors que PNG 8 sans alpha rencontre moins de problème de fluidité …
Pour terminer … utilisez toujours des logiciels de type « PNG Optimizer », ceci afin d’améliorer les canaux du format PNG et le poids du fichier final mal géré par Photoshop et Cie.
A ce sujet, le « Unit PNG Fix » constitue, selon moi, une excellente alternative : http://labs.unitinteractive.com/unitpngfix.php
[...] Slide de présentation du script PNGHack pour gérer la transparence des images au format PNG sur IE… (tags: css ie6 png) [...]