Il formato grafico PNG è estremamente interessante. La possibilità offerta dal supporto alle trasparenze è sicuramente la caratteristica più utile. Purtroppo solo gli ultimi browser supportano questa proprietà, e in particolare soltanto a partire da Internet Explorer 7 per quanto riguarda il browser di Microsoft.

Esiste comunque la possibilità di abilitare le trasparenze PNG anche per Internet Explorer 6 e precedenti attraverso vari plugin basati su javascript. In certe occasioni però l’effetto potrebbe servirci per solo un’immagine ed andare ad aggiungere javascript per così poco può essere superfluo.

In realtà tramite CSS e commenti condizionali possiamo intervenire utilizzando le stesse tecniche utilizzate dagli script javascript disponibili. E’ infatti possibile utilizzare i filtri inclusi in IE, in particolare "AlphaImageLoader", per ottenere il medesimo effetto.

Ma ipotizziamo di voler utilizzare uno sfondo semitrasparente per l’header di un sito. Il codice CSS normale, che farà uso del PNG, sarà una cosa del tipo:

<style type="text/css">
#header {
   width:600px;
   height:100px;
   background:url(header.png);
}
</style>

Se andiamo a verificare con Internet Explorer 6 vedremmo però, al posto della trasparenza del PNG, uno sgradevole color grigio. La prima cosa da fare quindi è introdurre un commento condizionale per poter intervenire solo per i browser precedenti a IE7:

<!--[if lte IE 6]>
<style type="text/css">
   /* qui ci va l'hack */
</style>
<![endif]-->

All’interno andiamo quindi a modificare lo sfondo dell’header, rimuovendo l’immagine:

<!--[if lte IE 6]>
<style type="text/css">
#header {
   background:none;
}
</style>
<![endif]-->

Ora possiamo utilizzare il filtro di IE per reintrodurre l’immagine:

<!--[if lte IE 6]>
<style type="text/css">
#header {
   background:none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src = 'header.png',  sizingMethod = 'scale');
}
</style>
<![endif]-->

Come potete vedere passiamo al filtro due parametri: il primo è il sorgente dell’immagine, il secondo è il "sizingMethod", e cioè come l’immagine viene applicata all’elemento. Con l’impostazione "scale" l’immagine viene stirata fino a raggiungere le dimensioni dell’elemento a cui è applicata, mentre con "Crop" viene tagliata se supera le dimensioni dell’elemento.

Rispetto alla gestione normale degli sfondi non abbiamo possibilità di gestire né il posizionamento dello sfondo (background-position) né la sua ripetizione in verticale o orizzontale (background-repeat). Non è quindi possibile avere comportamenti particolarmente avanzati, tuttavia l’effetto è più che sufficiente per tecniche di image-replacement o per sfondi di elementi dalle dimensioni ben precise.

Come ultima cosa è però necessario ripristinare la corretta funzionalità dei link perché applicando i filtri Internet Explorer va a porre l’immagine PNG sopra agli elementi interattivi del sito, inibendo quindi la possibilità di clickare. Per sistemare il tutto però è sufficiente aggiungere la proprietà "position:relative" per portare il link sopra lo sfondo e quindi per renderlo nuovamente clickabile. Per farlo modifichiamo il CSS come segue:

<!--[if lte IE 6]>
<style type="text/css">
#header {
   background:none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src = 'header.png',  sizingMethod = 'scale');
}

#header a {
   position:relative;
}
</style>
<![endif]-->

Come vedete l’effetto è semplice da ottenere anche senza l’ausilio di apposite librerie e nel caso di una o due immagini può essere più comodo gestirle manualmente, risparmiando un po’ di bytes e di pesantezza di caricamento.