Forzare la trasparenza di un .png in Internet Explorer 6

ie7-logoEro incerto se scrivere questo post. Incerto perché si deve invitare la gente a non usare Internet Explorer 6, invece di utilizzare questi hack per far visualizzare bene il nostro sito anche nelle vecchie versioni del browser di casa Microsoft. Se li utilizziamo è come dire loro: “continuate pure ad usarlo”. Ma può capitare che in un caso particolare sia necessario intervenire per modificare il comportamento di questo browser. A me è capitato e non avevo scelta. Dovevo intervenire e questo è quello che ho provato.

Dovevo usare per forza un’immagine png trasparente e la persona aveva IE6. Di installare Firefox non se ne parlava nemmeno. In sostanza, dovevo forzare Internet Explorer 6 a renderizzare correttamente il canale alpha (la trasparenza) di una immagine .png. Ecco le righe di codice che ho usato:

<div style="
  position: absolute;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 100px;
  display:inline-block;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.mio-sito.it/percorso/alla/mia/immagine.png');">
  <img style="
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);"
  src="http://www.mio-sito.it/percorso/alla/mia/immagine.png"
  width="200" height="100" border="0" alt="" />
</div>

Chiaramente vanno personalizzati alcuni valori come position, width/height e src. Ecco una diapositiva di come viene renderizzato in XP con IE6:

Internet Explorer 6 renderizza correttamente la trasparenza di una immagine PNG dietro applicazione di un hack.
Internet Explorer 6 renderizza correttamente la trasparenza di una immagine PNG dietro applicazione di un hack.

Prima di chiudere una nota positiva. Ho dato un’occhiata alla pagina di Wikipedia in cui si parla di questo browser. Ho trovato una tabella sulla percentuale d’uso di IE ed ecco cosa ho visto:

La percentuale d'uso di Internet Explorer nei vari anni e versioni.
La percentuale d'uso di Internet Explorer nei vari anni e versioni.

Una soddisfazione! Dal 94,43% siamo giunti al 72,65%: ha ancora quasi i 3/4 del mercato, ma sono sicuro che Firefox e i browser open andranno sempre più avanti.

La fonte dell’hack è questa, dove trovate anche degli altri adattamenti del codice.

I’m Myself, thanks

myself.png

Sì, io sono me stesso.
E se sono quello che sono, lo devo alla mia gente,
con la quale vivo, respiro, rido e piango.
Grazie a loro io sono quello che sono.

La stesso discorso si applica al pc.

Se so quello che so, lo devo in massima parte alla mia Comunità di Ubunteri,
che mi hanno accolto, mi hanno seguito passo passo,
e mi hanno aiutato a rialzarmi quando sbagliavo,
a non scoraggiarmi se non c’era un’azienda dietro di me
che faceva tutto per me, ma proprio tutto,
anche decisioni che avrei dovuto prendere io.

Oggi questa Comunità mi ha restituito il mio computer.
Sì, il mio computer, prima, apparteneva ad Altri.

Oggi, con Ubuntu, il mio pc è davvero mio.

***

Grazie, Felipe, per la bella iniziativa.

Foto:Creative Commons License