PNG trasparenti in Internet Explorer 6

 Scritto da in   0 commenti

È noto tra gli sviluppatori di siti internet che nelle versioni di Microsoft Internet Explorer precedenti la versione 7, non è supportata la trasparenza del canale alpha delle immagini PNG in modo nativo.

Per abilitare la corretta visualizzazione della trasparenza dell’immagine con Internet Explorer 6, bisogna utilizzare un’estensione proprietaria Microsoft nei CSS.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='nomefile.png');

Con questa tecnica il canale alpha viene effettivamente riconosciuto, tuttavia utilizzandolo direttamente nei nostri CSS, viene persa la conformità allo standard w3c e viene generato un errore sottoponendo il foglio di stile al servizio di convalida dei CSS. In aggiunta, è molto problematico creare un sito cross-browser: l’immagine che definiamo in un normale tag IMG per i browser che supportano nativamente il formato, quali Firefox ed Opera, verrà caricata anche in Explorer senza trasparenza.

Molti sviluppatori finora hanno privilegiato la conformità allo standard CSS, preferendo non deturpare il codice dei fogli di stile con le stravaganze introdotte da Microsoft, ed hanno utilizzato il vecchio formato GIF con tutte le sue limitazioni (massimo 256 colori, 1 bit di trasparenza, protetto da brevetti e royalty). Questo ha causato per anni il ristagno di un ottimo formato, ideato appositamente per rimpiazzare GIF.

Ora che le nuove versioni di Internet Explorer implementano correttamente il formato PNG, si sta rapidamente diffondendo e molti siti iniziano ad adottarlo. Rimane tuttavia il problema delle versioni precedenti, ancora ampiamente diffuse nei sistemi operativi Windows 2000, Windows Millennium Edition e Windows 98, che non possono essere aggiornate ad Internet Explorer 7.

Per risolvere questo problema possiamo utilizzare JavaScript per identificare Internet Explorer 6 e, solo per questo browser, modificare il sorgente della pagina HTML rimuovendo tutti i tag IMG e sostituendolo con un tag SPAN a cui viene applicata la regola proprietaria Microsoft. Questo approccio ci consente di conservare la conformità CSS.

/*
* PNG Patch 1.0 javascript library
*
* Copyright © 2003 - 2007 Davide Bia
* http://www.flyonthenet.com/
*
*  This program is free software; you can redistribute it and/or modify
*  it under the terms of the GNU General Public License version 2
*  as published by the Free Software Foundation;
*
*  This program is distributed in the hope that it will be useful,
*  but WITHOUT ANY WARRANTY; without even the implied warranty of
*  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
*  GNU General Public License for more details.
*
*  http://www.gnu.org/licenses/gpl-2.0.txt
*
*/

function PNG_Replace(PNG_Image)
{
var PNG_Patched = false;
if(!PNG_Image)
PNG_Image = event.srcElement;
if(PNG_Image.src.search(/\.png$/i) > -1 && PNG_Image.className.search(/(?=^|\b)noalpha(?=\b|$)/i) == -1)
{
var PNG_Span = document.createElement("span");
PNG_Span.setAttribute("title", PNG_Image.title || PNG_Image.alt);
if(PNG_Image.className)
PNG_Span.className = PNG_Image.className;
if(PNG_Image.border)
PNG_Span.style.borderWidth = PNG_Image.border + "px";
PNG_Span.style.display = "inline-block";
PNG_Span.style.height = PNG_Image.offsetHeight + "px";
PNG_Span.style.width = PNG_Image.offsetWidth + "px";
PNG_Span.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + PNG_Image.src + "')";
PNG_Image.replaceNode(PNG_Span);
PNG_Patched = true;
}
return PNG_Patched;
}

function PNG_Patch( )
{
if(typeof document.images != "undefined" && typeof document.body.style.filter != "undefined")
for(var i=0; i
if(PNG_Replace(document.images[i]))
i--;
}

if(navigator.userAgent.indexOf("MSIE 6.0") > -1)
{
if(document.readyState != "complete")
document.attachEvent("onreadystatechange", PNG_Patch);
else PNG_Patch( );
}

Se siete intenzionati ad utilizzare il codice nel vostro sito, si consiglia di scaricare la libreria e salvare il codice in un file .js separato, da aggiungere nella sezione HEAD del documento.

[code lang=”html”][/code]