BigThink

PNG trasparenti su IE6

Ormai si sa, il browser che peggio supporta gli standard è sempre lui, Internet Explorer. Ancora ancora la versione 7, ma la 6 è davvero scandalosa.

Oltre ai vari problemi legati alla visualizzazione dei CSS e via dicendo, è noto il bug delle PNG trasparenti. IE6 si rifiuta semplicemente di mostrarci la trasparenza, sostituendola con uno sfondo grigio. Bello…

Stiamo parlando delle PNG-24 che, a differenza delle solite GIF, supportano colori a 24 bit e ci permettono di utilizzare ben 256 livelli di trasparenza. Un’altra cosa rispetto alle pessime GIF! Vediamo allora come risolvere il problema su IE6, perchè (purroppo) non possiamo obbligare tutti a passare a FireFox.

Esistono diversi hack CSS e javascript adatti allo scopo. Molti usano la proprietà filter, applicando manualmente il filtro AlphaImageLoader di proprietà Microsoft, ma ciò comporta un minimo di personalizzazione e sporca un po’ il codice della nostra pagina.

Quello che vi propongo è IE PNG Fix che, con una sola riga di codice, correggerà il malefico bug: le nostre immagini e sfondi PNG si vedranno senza alcun problema. Intanto scaricate lo zip che contiene i file necessari: una GIF trasparente 1x1px e il file iepngfix.htc che contiene il codice javascript. Uploadateli ad esempio nella cartella contenente i vostri file css.

Ora è sufficiente aggiungere alla pagina questo codice:

1
2
3
<style type="text/css">
      img, div { behavior: url(css/iepngfix.htc) }
</style>

Se siete puristi della validazione, potrebbe non piacervi usare la proprietà behavior (non considerata valida W3C). L’alternativa è aggiungerla tramite javascript:

4
5
6
7
8
9
10
<script type="text/javascript">
    if (document.all && document.styleSheets && document.styleSheets[0] &&
document.styleSheets[0].addRule){
      document.styleSheets[0].addRule('img', 'behavior: url(iepngfix.htc)');
      document.styleSheets[0].addRule('div', 'behavior: url(iepngfix.htc)');
   }
</script>

Si può applicare il behavior ai tag img e div, ma anche solo a classi specifiche. Come preferite.

E un’altro bug di IE6 è fixato! Buon lavoro!

Articolo scritto da Ghido

Fondatore di BigThink.it, si occupa dello sviluppo e del coordinamento dei progetti tecnologici. Specializzato nel Marketing su Facebook e nello sviluppo di Applicazioni Social, fa consulenza e formazione ad aziende ed agenzie.

Leggi anche...

Creare una newsletter con i feed del proprio blog

Creare una newsletter con i feed del proprio blog

Un ottimo strumento per la promozione del proprio blog è la creazione di una newsletter, in modo che gli utenti più affezionati possano ricevere gli aggiornamenti direttamente sulla loro casella di posta. In questo articolo vedremo come creare una newsletter che, basandosi sui feed del nostro blog, invii automaticamente agli iscritti una mail, ogni ...
CSS trick: div contenitore in full-height

CSS trick: div contenitore in full-height

Spesso abbiamo la necessità che il div contenitore del nostro sito si estenda per tutta l'altezza della pagina web, anche se il contenuto è minimo. Come fare? Per questo esempio, è sufficiente il solo div "container" con del testo: <div id="container"> <p>Testo</p> </div> Aggiungiamo gli stili base e coloriamo il div per visualizzarlo nel nostro esempio: #container{ height:100%; background:red; } Tuttavia non basta ...
 Il TrustRank tramite Pagerank e Link Popularity

Il TrustRank tramite Pagerank e Link Popularity

Ho scritto un esauriente corso online su come aumentare PageRank e Link Popularity e di conseguenza su come ottenere miglioramenti nel TrustRank, in forma completa lo trovate qui: Corso su PageRank e Link Popularity. Su BigThink voglio fare una panoramica generale su alcuni punti cruciali da seguire, lo farò con diversi articoli che si ...
Immagini vettoriali e foto gratis per i vostri siti

Immagini vettoriali e foto gratis per i vostri siti

Siete alla disperata ricerca di immagini vettoriali liberamente utilizzabili nei vostri lavori? Magari non siete dei grandi grafici e vi farebbero comodo disegni, simboli e forme già fatti ed adattabili? Spulciando nella mia lista di bookmark, collezionati in anni di ricerche, ho trovato questi siti che raccolgono e mettono a disposizione tantissimi vettori di ...
Galleria Coverflow in stile Apple per il tuo sito

Galleria Coverflow in stile Apple per il tuo sito

Chi ha un iPod o un iPhone, ha sicuramente ben presente come questo visualizzi le immagini dei vostri album preferiti: facendo scorrere una barra (o scorrendovi sopra il dito, nel caso di touchscreen) è possibile sfogliare le varie copertine come se fossero pagine. Il tutto con un gradevole effetto di trasparenza e riflesso. Il ...

3 Commenti

  1. Ghido

    Ottimo, grazie mille!

    4 settembre 2008, 00:06
  2. Dario

    Qua ce ne sono indicate un altro po’…
    http://tinyurl.com/5wme8d
    ciao!

    3 settembre 2008, 23:42

1 Citazioni