CSS3 per Internet Explorer 6-7-8+

Grazie a fetchak.com è stato rilasciato uno script che permette di utilizzare le più note proprietà CSS3 anche su internet explorer nelle versioni 6 7 e 8. Lo script si chiama ie-css3.htc ed è liberamente scaricabile dal sito ufficiale all’indirizzo: http://fetchak.com/ie-css3/. Purtroppo non è tutto oro quel che luccica ed in fondo all’articolo sono elencate alcune carenze dello script…

Come funziona?

Lo script utilizza il linguaggio VML (Vector Markup Language) un linguaggio di disegno vettoriale specifio cper IE. VML offre il supporto per i bordi arrotondati (border radius) e le ombre (text-shadow e box-shadow) che di default sono assenti nel browser.

Come utilizzare lo script ie-css3.htc

Aggiungi il CSS come faresti normalmente, ma includi la riga con la proprietà behavior per garantire la compatibilità con IE. Ecco come:

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari e Chrome */
  border-radius: 15px; /* Opera 10.5+, browser futuri, necessaria per IE6 e superiori perchè lo script funzioni */
  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari e Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, browser futuri, necessaria per IE6 e superiori perchè lo script funzioni */
  behavior: url(ie-css3.htc); /* Fai sapere ad IE che deve utilizzare lo script per interpretare le proprietà CSS3 */
}

Problemi e soluzioni

Normalmente l’url della proprietà behavior: url(…) fa riferimento alla posizione relativa alla directory in cui si trova il file css in cui viene dichiarato, così come accade per la proprietà background-image: url(…) per esempio, ignorando gli standard, Microsoft ha deciso che debba fare riferimento alla root del sito. Nel caso in cui quindi non vi funzionasse lo script, provate a spostare il file e a cambiare la dichiarazione.

Potresti incontrare problemi relativamente all’uso dello script e della proprietà z-index nel caso che lo script IE-CSS3 sia attivato in elementi annidati. In questo caso occorre utilizzare due accorgimenti per risolvere:

• Imposta lo z-index dell’elemento CSS3 con un numero maggiore degli elementi circostanti.
• Assicurati che l’elemento CSS3 abbia una posizione dichiarata relative o absolute.

Alcune volte un elemento che utilizza IE-CSS3 apparirà leggermente spostato dalla posizione in cui dovrebbe trovarsi. Ci potrebbero essere alcune motivazioni:

• Qualche tag a monte dell’elemento CSS nel markup si è rotto, controlla 😉
• Stai incontrando un mix di bugs per IE6 ed IE7. Prova aggiungendo la proprietà zoom: 1 e/o position: relative all’elemento CSS3 ed al suo contenitore parente. Potresti anche provare a rimuovere i margini ad entrambi ed utilizzare invece i padding.

Stili e proprietà utlizzabili con IE-CSS3

Proprietà	Che cosa funziona	Che cosa non funziona
border-radius	Arrotonda i 4 angoli Arrotonda i bordi degli elementi	Settare curve diversi per i 4 angoli
box-shadow	Larghezza della sfocatura Offset	Qualsiasi colore diverso da #000
text-shadow	Larghezza della sfocatura Offset Colore	L’ombra appare leggermente diversa da come appare su Firefox/Safari/Chrome/Opera

Download