Voici la petite astuce décrite par Alex Walker sur SitePoint que je vais vous résumer brièvement.

Pour commencer, il faut savoir que le fichier PNG est composé de blocs appelés Chunks avec tous une fonction particulière. Passons les détails techniques, mais il existe un chunck d'opacité Alpha vous vous en doutiez (non ? pas assez Geek mon fils !), et c'est celui là même qu'IE 6 ne connais pas ainsi il ne peut traiter qu'un niveau de transparence, le célèbre bit d'opacité comme nos GIF adorés.

Bon, ensuite vous devriez également savoir qu'il existe plusieurs types de PNG, et notament le 24 bits, dit truecolor (avec l'accent d'Apu Nahasapeemapetilon c'est plus drôle) dont chaque pixel est défini par un code RVB, le 32 bits (le 24 bits + l'Alpha 8 bits) et le 8bits. Ce dernier n'est pas pourri (oui les gribouilles, vous pensez souvent mal, c'est votre coté cerveau droit), il est comme le GIF, c'est à dire qu'il fait référence à une palette de couleurs. Ainsi au lieu d'avoir un code RVB, un pixel contient l'index d'une couleur dans une palette. On obtient d'ailleurs d'excellent résultats lorsque le nombre de couleurs est limité, comme pour le cas des interfaces web par exemple. L'enorme avantage des fichiers avec des couleurs indexées est bien évidement ... la taille.

Bref, parenthèse fermée, revenons à nos moutons. Notre solution réside dans ce PNG 8bits lié avec la PUISSANCE de Fireworks. L'astuce est qu'au lieu de créer un GIF et ne bénéficier que d'un seul niveau de transparence, nous allons faire un PNG-8 avec ... plusieurs niveaux de transparence...
Mais oui mais bien sur mais comment ? Avec la PUISSANCE de Fireworks voyons. Effectivement, avec la PUISSANCE de Fireworks, il est possible d'ajouter ce bloc de transparence grâce à l'onglet "Optimize" en sélectionnant tout bonnement "Alpha Transparency", qui va permettre d'indexer différents niveaux de transparence dans la palette, au lieu de "Index Transparency" proposé initialement (le célèbre bit unique de transparence). TAINDAIN ! Hé oui Gérard Majax n'a qu'à se rhabiller !


Voyez moi ça :




Mais il y a un hic, ça aurait été trop beau... Je ne sais pas, mais je vous sens déçu là... En effet IE 6 ne kiff pas trop sa vibe cette solution, ben oui normal me direz vous, il ne peut pas piffrer le chunk d'Alpha... Cependant il se comporte pas trop mal. Au lieu de coller un sale fond gris parce qu'il a décidé de nous pourrir la vie, il se comporte comme un PNG-8 normal, avec son unique niveau de transparence. Je sais ce n'est pas très joli (chut les gribouilles !), mais ce n'est pas catastrophique non plus (enfin ça dépend de la taille des ombres portées hein !). Je vous laisse en image afin de bien comprendre la différence de comportement en fonction des navigateurs.







... Je vous engage à aller sur le billet original qui, par ces commentaires, ouvre de nouvelles portes aux plus Geeks d'entre nous...