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...

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 ...
[Invito] Conferenza free (virtuale) su Seo e Traffico Web!

[Invito] Conferenza free (virtuale) su Seo e Traffico Web!

Saluto tutti i lettori di BigThink. Oggi voglio proporvi una Tele Conferenza free (virtuale) su SEO e Traffico Web che terrò Giovedi 29 alle 21:30 con il grande Alex Billico, che ha organizzato altre Tele Conferenze simili con personaggi di grosso calibro come Robin Good, Marco De Veglia, Giulio Marsala, Carlo D’Angiò, Daniele D'Ausilio ...
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 ...
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 ...
Migliora la qualità del tuo sito internet in pochi semplici passi

Migliora la qualità del tuo sito internet in pochi semplici passi

Per progettare un sito internet è necessario un approccio diverso da quelli tradizionalmente utilizzati come ad esempio la produzione di un’automobile o la costruzione di una casa, in quanto: Comporta la strutturazione di un’ampia e complessa rete informativa che deve essere ben chiara e ...

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