Utilizzare PNG trasparenti su Internet Explorer

Il formato PNG per le immagini è sempre più diffuso sul web da quando è stato creato nel 1995, e con l’utilizzo delle trasparenze consente di ottenere ottimi risultati.

E’ infatti possibile sovrapporre immagini trasparenti ad altri elementi per arrivare ad interessanti combinazioni irraggiungibili con il formato GIF, se non fosse per i soliti problemi di compatibilità con Internet Explorer.

Al contrario dei vari Firefox, Opera, ecc.., il browser di casa Microsoft non supporta le trasparenze dei PNG mostrando un improbabile sfondo grigio.

La soluzione in attesa di IE7 consiste in un hack CSS che permette di aggirare il problema utilizzando un particolare filtro per IE (dalla versione 5.5 in poi).

Potete vedere subito l’esempio che ho realizzato; per i vostri test tutto quello che dovrete fare è usare il seguente codice CSS:

#overlay{
background: url(opaco70.png);
}
* html #overlay { /* Regole per IE (dalla 5.5 in poi) */
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src="opaco70.png" ,sizingMethod="scale");
}



Ovviamente la vostra immagine PNG andrà a sostituire opaco70.png dell’esempio, così come il nome dell’elemento a cui applicare la trasparenza.

I problemi di questa tecnica? Eccoli:

• Non è supportata da Internet Explorer 5 ed inferiori, quindi se il vostro sito è studiato per funzionare anche con questo browser, meglio evitare di utilizzarla
• L’elemento a cui applicate la trasparenza dovrà avere width e height impostate, o in alternativa position: absolute (decisamente restrittivo, lo so)
• L’utilizzo di CSS hack deprecati e non standard

Traete le vostre conclusioni, la cosa potrebbe tornare sicuramente utile aspettando l’uscita ufficiale di IE7, ma sono da valutare bene i pro ed i contro.