Quando pochi giorni fa siamo andati a caricare il nostro file PNG sul sito web, il nuovo logo nuovo di zecca (si vorrebbe dire, ma non sembra nuovo!) siamo rimasti un po' amareggiati dal riscoprire che alcuni vecchi bug erano sempre lì ad attenderci.

In particolare mi riferisco, e qua la faccenda deve necessariamente andare sul personale, al supporto dei file PNG da parte di Internet Explorer (o IE), in particolare ogni versione inferiore alle 7. Il che è strano poichè, a quanto si legge sulla wiki di PNG, la seconda edizione delle raccomandazioni W3C per questo formato risalgono al novembre 2003. Oltre 5 anni fa.

Non tutti i progetti necessitano o prevedono l'utilizzo di file PNG... e così capita di sottovalutare problemi, o addirittura di dimenticarsene.

La gang si è messa al lavoro e, convinti di trovare _secchiate_ di soluzioni elegantissime, abbiamo sguinzagliato il google della situazione. Il brillante risultato al quale siamo giunti è:

Accidenti! ACCIDENTACCIO!!!

Significa che esistono online molte e diverse soluzioni ma anche che, data la complessità delle ultime evoluzioni di HTML, XML, XHTML, il tutto ovviamente in salsa CSS, molti metodi non funzionano con particolari configurazioni, o peggio si ottengono effetti nefasti altrove.

Il nostro problema era semplicemente mettere un PNG con trasparenze in background: il fatto che abbia trasparenze non mette in imbarazzo nè firefox nè i suoi derivati, ma IE6 ignora completamente le direttive PNG e spalma un bello sfondo grigio cemento. Vuoi vedere che con tutte quelle trasparenze ci siamo ritrovati un browser moralista?

La prima soluzione la fornisce niente popo' di meno che la Microsoft KB, fornendo le indicazioni per inserire un filtro di gestione trasparenze nello stile CSS, roba fuori standard... ma se funziona.. usiamola! Per noi non ha funzionato.

Come seconda soluzione è stato proposto l'uso dei conditional comments, praticamente un modo per modificare una pagina html a seconda della versione di explorer riscontrata. E' un mezzo pratico e, alle volte, funzionale ma non si applicava completamente al nostro caso e rendeva la manutenzione del sito un po' più complicata di quanto non volessimo.

Su alcuni blog abbiamo addirittura trovato originalissime soluzioni con c-block, data-block, codici come @cc e #ie6only, ma nessuna di queste ha funzionato nel nostro caso.

Per usare una certa immagine come background di un elemento DIV e usare una GIF al posto del PNG nel caso si adoperi IE6 o inferiore abbiamo usato una delle proprietà cardine dei CSS, ovvero il fatto che siano Cascading. Ecco uno stralcio del codi

ce CSS usato:

div#png_trasp {
    background: url('/mylogos.gif') 0 0 no-repeat;
}


html > body div#png_trasp {
    background: url('/mylogos.png') 0 0 no-repeat;
}   

Il primo statement viene correttamente interpretato da tutti i browser e si riferisce all'immagine GIF. Consideriamolo una sorta di default che dovrebbe essere compatibile con tutto.

Il secondo statement, invece, viene correttamente interpretato solo da IE7, Firefox e browser compatibili in genere. Per questi browser (e soprattutto per gli utenti) il premio è di poter caricare il più performante e brillante formato PNG.

Nel nostro caso, inoltre, ci siamo permessi di mettere una piccola nota nel qual caso un utente si appresti a venirci a trovare con il vetusto browser: la nota lo invita ad aggiornare il browser o a prenderne uno diverso.

Il codice che ne risulta è semplice e facilmente manutenibile, non modifica l'html esistente anche se, forse, come unico neo, potrebbe provocare il caricamento di entrambe le immagini e il caso non ci preoccupa poichè sono solamente 2kb.

Avendo un po' di tempo lo si potrebbe anche verificare....