Il formato PNG offre la possibilità di utilizzare trasparenze di un livello qualitativo maggiore di qualsiasi altro formato ( vedi GIF ). Se state leggendo queste righe sicuramente saprete che l’immortale Internet Explorer 6 ha qualche problema nella gestione di questo formato, rimpiazzando la trasparenza con un colore grigio.

Fortunatamente esistono delle soluzioni al problema, quindi non dovremmo fare a meno di utilizzare le immagini PNG per il nostro progetto per fare in modo che sia compatibile con tutti i browser, o quanto meno, con quelli più utilizzati.

Il primo metodo che andrò ad esporvi implica l’inserimento di una regola nel foglio di stile, la regola è la seguente:

	* 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)
	);
	}

Questo codice css potete inserirlo nel foglio di stile principale del vostro progetto, magari subito dopo il codice per il reset dei css o inserirlo in un foglio di stile a parte, se preferite trattare le regole per IE6 separatamente.

Il secondo metodo è quello descritto nel sito http://webfx.eae.net/. Si tratta di scaricare 2 files ed inserirli nella nostra applicazione tramite una veloce regola css, la seguente:

<style type="text/css">

img {
   behavior: url("pngbehavior.htc");
}

</style>

Il file in questione, pngbehavior.htc, lo trovare all’interno dell’archivio che potete scaricare da questo link.

Come ho scritto poco prima, i file necessari sono 2, l’altro file in questione è blank.gif, lo trovate all’interno dello stesso archivio. Per il corretto funzionamento di questo metodo vi consiglio di fare attenzione ai percorsi sul server dei vari files, incluso il vostro css.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Prima o poi qualsiasi sviluppatore web arriva a porsi il quesito: ‘ma come faccio ad inserire l’icona rappresentante il mio sito nella barra degli indirizzi/tab del browser?’

Il problema è sempre stato trovare un software che fornisse la funzionalità di gestione dei file .ICO.

Ci viene in risposta un ottimo plugin freeware e Open Source per Photoshop ( compatibile anche con Elements e Paint Shop Pro 9 ) che aggiunge nel menu ’save’ del menzionato programma di grafica l’opzione ‘.ICO’.

Potete scaricare il plugin da http://www.telegraphics.com.au/sw/#icoformat

Il plugin è disponibile per diverse piattaforme, per installarlo basta semplicemente scompattare l’archivio scaricato ed installare il plugin ( ICOFormat.8bi ) nella directory dei plugins di photoshop ( ‘Plug-Ins’ nella vostra installazione di Photoshop ).

Fatto ciò avviate/riavviate il programma ed avrete la nuova opzione di salvataggio disponibile alla voce ’save’ ( che non è ’save for web..’ )

Una volta salvato il file spostatelo in una directory della vostra applicazione web ed aggiugete nel codice html, il seguente codice ( che dev’essere compreso tra i tag … ):

<link rel="icon" href="path/to/my.ico" type="image/x-icon">
<link rel="shortcut icon" href="path/to/my.ico" type="image/x-icon">

Nota: il plugin può gestire anche i file .CUR.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.