La più grande noia per un webdesigner che ricorrre al CSS per disegnare i propri layout è la diversità con cui ogni browser gestisce le proprietà assegnate nel foglio di stile: inutile nascondere che i più grandi problemi si sono sempre creati con i browser made in Microsoft.
Negli ultimi tempi questo problema è stato in parte risolto dalla nuova versione di Internet Explorer, la 7, ma la versione precedente del navigatore è ancora una percentuale molto alta che non può essere trascurata.
In questo tutorial vi presento la soluzione (ma sarebbe meglio parlare di un hack) al problema della trasparenza delle PNG in IE6 che come sapete non viene affatto gestita.
La trasparenza tramite PNG è un effetto importante per ogni artista del web in quanto permette una sfumatura graduale del canale alpha del colore, a differenza della immagini GIF dove la trasparenza riguarda un unico colore della palette.
Per risolvere il problema ricorreremo al filtro Microsoft AlphaImageLoader e alla proprietà expression.
* html img,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none") && (this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}Per tutte le immagini nella pagina con estensione PNG definiamo il comportamento tramite l’espressione dichiarata.
Senza entrare nel dettaglio, caricando trasparent.gif, una GIF di 1×1 pixel di colore trasparente, ricreiamo l’immagine usando filter e la sostituiamo alla precedente.
Ovviamente Javascript dovrà essere attivo altrimenti l’expressione non verrà eseguita.
Comunque, dato che Explorer 6 è destinato all’estinzione e questo hack non ci serve a nulla negli altri browser, sarà bene limitarne l’esecuzione a quest’unica versione del browser Microsoft, tramite i conditional comments.
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="png_fix.css" />
<![endif]-->
In un foglio di stile separato, png_fix.css, inseriamo il codice menzionato sopra: il commento condizionale caricherà il file solo se riconoscerà la versione 6 del browser Microsoft.
UPDATE:
Visto che il metodo di cui sopra ha creato problemi a qualcuno ne presento un altro più semplice preso dal sito WebFX, che dovrebbe accontentare tutti. :)
Da questa pagina scarichiamo il seguente ZIP pngbehavior102.zip, scompattiamolo e prendiamo i 2 file necessari per visualizzare il canale alpha delle PNG su Explorer 6: blank.gif e pngbehavior.htc, inseriamo questi file nella stessa directory dove si trova la PNG di cui vogliamo visualizzare la trasparenza.
Quindi inseriamo nel codice CSS la stringa:
e il gioco è fatto!
Vi ricordo che le PNG di cui vogliamo visualizzare il canale alpha devono essere elementi HTML della pagina e non sfondi attribuiti tramite il CSS, inoltre è preferibile non utilizzare filtri sulle immagini che potrebbero compromettere il funzionamento del PNG Behaviour.
Ritieni questo post utile o interessante?
Condividi e Segnala
IE6, Internet Explorer, png trasparenti, tutorial
Leggi anche:
HTML, questo sconosciuto…1ma parte
Per ogni webdesigner che si rispetti è normale conoscere una moltitudine di linguaggi diversi, saper trovare la soluzione ad ogni problema di visualizzazione e stupire il pubblico con elaborati effetti speciali creati con non troppo semplici script. Ma quello che lo sviluppatore web dimentica è che una pagina web, prima di Ajax, Javascript e oggetti Flash [...]
png trasparenti su ie6: soluzione definitiva
Dopo varie soluzioni o PNG fix provate per ottenere l'alpha channel sulle immagini in formato PNG ovvero la PNG trasparenti funzionanti sull'ancor diffusissimo IE Internet Explorer 6 posso affermare di aver individuato quella definitiva. Nel precedente post PNG trasparenti anche con Internet Explorer 6 era stato preso in esame il problema e proposte un paio di [...]
Verifica antispam CAPTCHA con PHP, tutorial
In questo tutorial parliamo del CAPTCHA ed illustreremo come implementarlo in pochi passaggi con PHP. Il CAPTCHA è ad oggi il metodo più utilizzato nei form per distinguere umani da bot e si tratta di un'immagine con testo generato dinamicamente su sfondo distorto o comunque di difficile lettura che quindi non può essere decifrato facilmente da [...]
Tutorial Photoshop
Nella sezione risorse on line non poteva mancare una bella lista di siti pieni di tutorial Photoshop per imparare ogni trucco di questo meraviglioso programma di grafica pubblicitaria, fotoritocco e web design. Planet Photoshop Nella categoria tutorial di questo sito trovate una vasta collezione di videotutorial con tecniche Photoshop molto utili, effetti su testi, maschere etc. PS Hero Sito [...]
Passare valori e parametri a Flash in AS3 con SWFObject
Credo che pochi non abbiano mai avuto bisogno di passare parametri dalla pagina agli SWF precompilati, comunque scrivo questo tutorial per chi ancora non l'ha fatto (o sta avendo problemi nel farlo) col codice Actionscript 3.0. L'esempio a seguire fa uso della libreria Javascript SWFObject (ex Flashobject costretto a cambiar nome per ovvi problemi di copyright) [...]
dei commenti -
lascia un commento - trackback
Ciao, sto sviluppando per la pima volta nella mia vita un sito web, ovviamente non e’ ancora pubblicato, sto cercando di risolvere certi “problemini”, primo tra tutti ho dei testi/immagine che si sovrappongono che mi piacerebbe rivelassero i colori di sfondo.
Quello che non ho capito della tua spiegazione e’ se l’immagine .png deve essere posizionata normalmente nella pagina o se bisogna attribuirgli delle specifiche diverse e anche se essa non debba essere menzionata nel codice da te pubblicato. Ho provato ad inserire il codice in un png.css (inserendo ovviamente all’interno la giusta path per il mio file blank.gif) a parte inserendo nella mia pagina .htm il conditional comment; ma pare non sia sufficiente
grazie per qualsiasi aiuto potrai fornirmi
Mmm, elimina il conditional comment e importa tranquillamente png.css oltre al css che già usi, vediamo se dipende da quello.
Poi assicurati che l’immagine sia posizionata come elemento html nella pagina quindi tag IMG con SRC che carica il .PNG di cui vuoi la trasparenza.
Nel caso di immagini usate in modi particolari tipo sfondi ripetuti invece so che bisogna modificare il sizingMethod da ‘crop’ a ’scale’ ma non ho testato ancora.
Fammi sapere.
E se la png è caricata dentro il css sapete come fare?
Anch’io vorrei tanto sapere come fare se l’immagine è richiamata dal css. Sto facendo un menu con rollover ed entrambe le immagini sono png trasparenti. Lo stato a ok, ma lo stato a:hover non viene caricato. Aiutoooo!!!
idem.. io la uso come sfondo di un div e non funziona…
Ora c’è un modo per avere la trasparenza anche sulle PNG richiamate tramite CSS:
PNG trasparenti su IE 6: la soluzione definitiva