IePngFix: patch per trasparenza png su Internet Explorer 6

Come risaputo Internet Explorer 6 resta il browser obsoleto per eccellenza, nonostante la sua vita da protagonista su Windows Xp e Windows Server 2003 sia durata ben 6 anni, supporta parzialmente CSS1 e DOM di livello 1.

E’ diventato con il passare del tempo il nemico pubblico numero 1 dei webmaster poiché essendo stato concepito per immagazzinare codice HTML di tipo tabellare e per l’appunto supportando di base CSS1 sono stati inventati degli “accrocchi” o delle pezze per far si che questo browser si adeguasse agli altri. Uno di questi “accrocchi” permette la visualizzazione della trasparenza su immagini con estensione PNG.

La patch che sto per introdurvi si chiama “IePngFix”, ma entriamo nel dettaglio:

1. Scaricare IePngFix

Clicca qui per scaricare IePngFix, decomprimete l’archivio, all’interno troverete 4 file:

• iepngfix.htc
• ghost.gif
• esempio.html
• immagine.png

2. Come applicare la trasparenza su immagini png

Il file iepngfix.htc andrà incluso come proprietà di una classe css “behavior”, questa classe andrà assegnata a qualsiasi tag html contenga un’immagine o un background in trasparenza, quindi:

Tenendo conto dell’esempio scaricato nel codice HTML ho la seguente immagine PNG da rendere trasparente:

Ad essa assegno una classe, la chiamo “trasparenza”:

Via CSS costruisco la classe “trasparenza” che all’interno richiama il file .htc per eseguire il render dell’immagine.

.trasparenza{ behavior: url('iepngfix.htc'); }

3. Fine

Ho applicato la patch per la trasparenza png anche su IE6. A differenza di altre patch che chiamo “disordinate” poiché includono un semplice “Javascript” che scansiona tutte le immagini all’interno della pagina ed applica ad esse una trasparenza (anche a quelle che non ne hanno una), metodo controproducente poichè allunga i tempi di caricamento della pagina.

4. Migliorare il codice

Per non intaccare la velocità di caricamento della pagina con i browser che di per se leggono la trasparenza di PNG senza patch utilizziamo i commenti condizionali in modo tale che il browser interpreterà quell’inclusione solo e soltanto con Internet Explorer versione 6, quindi: