Dal 2004 il blog di Antonio Troise

E’ noto a tutti che uno dei grandi problemi di Internet Explorer (dalla release 5.5 alla attuale 7) è quello di non riuscire a visualizzare correttamente la trasparenza presente nei file immagine di tipo PNG.
Per chi non lo sapesse il formato PNG (Portable Network Graphics) fu creato nel 1995 da un gruppo di autori indipendenti, dopo che nel 1994 il popolarissimo formato GIF iniziò ad avere problemi di brevetti. Superficialmente simile al GIF, in quanto è capace di immagazzinare immagini in modo lossless, non ha molte delle limitazioni tecniche del formato GIF: infatti, è in grado di memorizzare immagini in colori reali (mentre il GIF era limitato a 256 colori) e ha un canale dedicato per la trasparenza (layer alpha).
Purtroppo, nonostante tutti i maggiori programmi di grafica e di navigazione supportino correttamente questo formato grafico, l’unica eccezione è appunto Internet Explorer versione 5 e superiore. Infatti, anche nella più recente versione di Explorer, nonostante permetta la visualizzazione del formato PNG, il layer alfa è gestito male.

In particolare, IE dalla versione 5.5 alla 6 è infatti in grado di mostrare le PNG, ma non ha il supporto per la trasparenza variabile. Infatti IE5.5 e 6 riescono a leggere queste immagini senza trasparenza o con trasparenza binaria (se quindi si presentano a 8bit) ma per le immagini con trasparenza variabile, non esisteva ancora una piena compatibilità, mostrando un antiestitico colore grigio.
Questo, almeno apparentemente, sino all’avvento di IE7.

Per quanto riguarda IE7, quindi, nonostante si dica che sia stato pienamente supportato il formato PNG, dopo alcuni test si è scoperto che IE7 tratta i PNG (ad 8 bit o 24) in modo differente dagli altri browser come FireFox e Opera, creando un ennesimo antiestetico effetto di taglio su un’immagine PNG usata come sfondo in repeat-x, mentre solo FireFox rende perfettamente lo stacco.
Eccone un esempio:

Questa è una cosa che molti webmaster e webdesigner devono tenere conto: io personalmente, quando ho sviluppato il template di questo sito, avevo usato delle iconcine png con lo sfondo trasparente, ma quando ho fatto il test di visualizzazione su Explorer, mi sono accorto che ognuna di esse era contornata da uno sfondo grigio chiaro e sono stato, quindi, costretto a convertirle in GIF, perdendo una inevitabile fetta di colori.

Se molti, preferiscono professare il motto “abbandonate explorer” è anche vero che, dati alla mano, è ancora il browser più usato al mondo (ovviamente solo perché preinstallato sul sistema operativo più diffuso al mondo) e quindi occorre considerare fix che possano permettere la corretta visualizzazione della trasparenza delle immagini in PNG.

Nel tempo molti si sono cimentati nella soluzione definitiva lato server, in attesa che Microsoft risolva il problema a monte, ovvero, semplicemente, ripristinando la corretta visualizzazione del layer alpha da parte dell’engine di rendering di IE. Tra queste posso citare articoli come PNG in Explorer 6, PNG Behavior, Cross-browser semi-transparent backgrounds e The PNG problem in Windows Internet Explorer

Per molti, però, la soluzione migliore per poter utilizzare le PNG con trasparenza anche con Internet Explorer, consiste nell’usare IEPNGFix (qui trovate la demo, mentre qui potrete scaricare il pacchetto zip).

Per attivarlo sul proprio sito basterà copiare questo file htc, e questo file blank.gif nella vostra cartella di lavoro e, quindi, inserire nel vostro foglio di stile questa riga di codice css (comprensivo di commenti condizionali al fine di garantire la validazione del css):

<br /> <!--[if IE]> <style type="text/css"> img { behavior: url(iepngfix.htc); } </style> <![endif]--><br />

Soluzioni lato client si possono trovare anche qui dove, usando Multiple IE su Windows XP, si consiglia di copiare due file dll (dxtmsft.dll e dxtrans.dll) nella cartella “C:\WINDOWS\ServicePackFiles\i386“.

Ora che avete finalmente risolto l’annoso problema della trasparenza del PNG su IE, potete godervi la lettura di questo interessante articolo di Digital Web Magazine, Creative Use of PNG Transparency in Web Design, che spiega come far uso sapientemente delle partially transparent implementabili sulle immagini PNG per creare suggestivi effetti sul proprio sito.