Chi di voi ha un minimo di esperienza nella realizzazione di siti web avrà sicuramente avuto occasione di confrontarsi con l’inefficienza (per non dire altro) della versione 6 del browser di casa Microsoft. Tra i diversi problemi, più o meno fastidiosi (vedi il bug dei bordi “dotted”, puntinati, che vengono visualizzati come “dashed”, tratteggiati), spicca sicuramente quello della gestione delle immagini PNG.

Il PNG, Portable Network Graphics, è un formato per le immagini largamente utilizzato negli ultimi tempi; IE 6 ha il pesante difetto di non gestire le PNG trasparenti, con lo spiacevole risultato che invece della trasparenza viene visualizzato uno sfondo grigio.

Durante la realizzazione del mio ultimo lavoro mi sono dovuto confrontare con questo problema, poiché il sito sarebbe dovuto essere pienamente compatibile anche con la versione 6 del popolare browser.
Cercando sul web ho trovato diverse guide (quasi tutte basate sull’inclusione di un javascript che dovrebbe risolvere il problema), ma i risultati sono stati deludenti: in nessun caso riuscivo a far visualizzare correttamente le PNG utilizzate come sfondo nei DIV o in altri elementi.

Alla fine sono approdato a questa guida, e dato che sono riuscito a risolvere il mio problema, mi è sembrato utile riproporla qui sul blog.

In pratica, bisogna per prima cosa andare su questo sito e scaricare il pacchetto completo, contenente diversi files che vanno piazzati nella cartella principale del sito (o opportunamente richiamati dal CSS se si vuole metterli in un altra cartella). Come secondo passo, bisogna aprire il nostro foglio di stile ed inserire la seguente riga:

img, #esempio1, #esempio2 { behavior: url(iepngfix.htc); }

sostituendo ad #esempio1 ed #esempio2 i nomi (quanti volete) degli elementi che fanno uso delle PNG trasparenti.

Alcune precisazioni ed “effetti collaterali” di questo script:

  • non funziona sulle versioni di IE precedenti alla 5.5;
  • le immagini “processate” dallo script non possono essere cliccate e salvate col tasto destro del mouse;
  • lo script utilizza una particolare estensione della Microsoft per i CSS, la proprietà “behavior”; questo vuol dire che tale riga verrà interpretata solo dai browser Microsoft e che non creerà ovviamente problemi agli altri browser, ma comporterà la segnalazione di un errore al momento della validazione CSS;
  • le immagini ripetute come sfondo (repeat-y o repeat-x)… non vengono ripetute! (secondo l’autore, si tratta di una limitazione del filtro di rendering di IE6)
  • per le altre immagini PNG contenute nella pagina dovete dichiarare espressamente le dimensioni (altezza e larghezza), altrimenti verranno visualizzate con dimensioni errate;
  • all’apertura della pagina, può passare qualche secondo (ma in genere è quasi istantaneo) in cui le PNG non vengono visualizzate con le trasparenze (è necessario che si attivi il filtro di IE).
  • gli sfondi con allineamento verticale in basso vengono comunque visualizzati con allineamento in alto.