IePngFix: patch per trasparenza png su Internet Explorer 6

IePngFix: patch per trasparenza png su Internet Explorer 6

875
2
CONDIVIDI

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:

1
<img src="immagine.png" alt="immagine con trasparenza" />

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

1
<img src="immagine.png" alt="immagine con trasparenza" class="trasparenza" />

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

1
.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:

1
2
3
4
5
<!--[if IE 6]>
   <style>
      .trasparenza{ behavior:url('iepngfix.htc'); }
   </style>
<![endif]-->
  • Rosanna

    Ciao Mario.
    Mi piace il tuo metodo: molto semplice e lineare.
    Sai dirmi anche come posso risolvere il problema dei rollover e delle immagini ripetute inserite come sfondo all’interno dei css?

    Grazie 1000! Rosanna

  • Mario Concina

    hai provato ad inserire la proprietà behavior anche sulla classe “:hover”?