PNG trasparenti e Internet Explorer - SuperSleight 02/12/07

Il problema lo conosciamo tutti, con IE (versione 6 e inferiori) non possiamo sfruttare la trasparenza delle immagini PNG. Chi utilizza ancora il browser di casa Microsoft se ne renderà conto concretamente con l' icona del feed di questo blog, in alto a destra; presenta un fondo grigio (nero nella 5?) che non corrisponde alla realtà ma è una libera interpretazione di Explorer.

Per risolvere il bug Microsoft ha rilasciato il filtro AlphaImageLoader che nasconde però alcune controindicazioni; fortunatamente la rete è più grande e preparata anche di una grandissima azienda...

» continua

Dicevo delle controindicazioni, la prima ed evidente è che non esiste una proprietà filter nella lista del W3C. Si tratta di un estensione di Microsoft che potrebbe potenzialmente generare problemi con gli altri browser.

Altro problema di livello pratico. La "proprietà" applicata ad un immagine di sfondo non permette di operare sugli attributi di ripetizione (background-repeat) e di posizionamento (background-position).

L' elenco potrebbe continuare (problemi con i link, ritardi nel caricamento) ma a questo punto meglio segnalare direttamente la soluzione.

SuperSleight è uno script JS che risolve magicamente molti dei problemi elencati garantendo un ottimo supporto della trasparenza anche ad IE.

Una volta scaricato e decompresso lo zip avete 3 file, supersleight.js, supersleight-min.js e x.gif; caricate i tre file nel vostro server e quindi richiamate il file nelle vostre pagine in questo modo (prima del tag </head>):

<!--[if lte IE 6]>
<script type="text/javascript" src="supersleight-min.js"></script>
<![endif]-->

Come potete notare abbiamo caricato il JavaScript dentro ad un commento condizionale, in questo modo solo Explorer lo interpreterà (gli altri browser, semplicemente, lo ignoreranno). A questo punto le vostre immagini PNG trasparenti saranno correttamente visualizzate dal browser.