Stamani ho fatto un salto su un’articolo di Italian Web Design che parlava di testi con gradiente in css.

Questa tecnica fa uso di PNG, ma cosa succede con IE6 e IE5.5? Questo browser non supporta le PNG a 24bit trasparenti.

Mi sono ricordato però che io solitamente utilizzo un metodo per le png su IE che fa uso di un file .htc, e perchè non usare questa tecnica per rendere compatibile il tutto conIE 6 e 5.5?

Il risultato potete vederlo qui e adesso due parole su come realizzarlo.

I file necessari per la buona riuscita sono:

IEPNGfix
MooTools 1.11

A questo punto il gioco è quasi fatto. Una volta installato tutto nelle rispettive directory andiamo a creare un file Javascript dove inseriamo una funzione per far attivare il fix per IE:

function addPNGRule() {
if (document.all && document.styleSheets && document.styleSheets[0] &&
document.styleSheets[0].addRule) {
document.styleSheets[0].addRule('.png', 'behavior: url(c/iepngfix.htc)');
}
}

Cosa fa questo funzione? Semplice, aggiunge una regola globale al CSS dove, in caso esista la classe .png gli applica un behavior, in questo caso il fix delle png. Ovviamente lo fa solo per IE.

Poi con mootools (io uso mootools, ma poi siete liberi di usare ciò che volete) avvio la funzione alla fine del caricamento della pagina:

// Initialization Function
function init() { addPNGRule(); }

// Set DOMReady Events
window.addEvent('domready', init);

Questo per quanto riguarda il fix PNG, il codice invece del gradient è molto simile a quello originale, tranne l’applicazione della classe .png al tag span:

<h1 class="gradient"><span class="png">This is a PNG test</span></h1>

Et voilà! Il tutto funziona con i seguenti browser:

Safari 2
Safari 3
IE 5.5
IE 6
IE 7
Firefox
Opera 9