Come script decisamente più valido segnalo CSS3 PIE. Seguirà un tutorial in merito in futuro.
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 |
|
|
box-shadow |
|
|
text-shadow |
|
|