CSS: rotazioni e trasformazioni cross-browser
Le rotazioni CSS3 possono essere finalmente cross-browser grazie all’adozione da parte di Internet Explorer della proprietà -ms-transform. Ho appena letto questo interessante post di Samuli Hakoniemi su una soluzione cross-browser per far funzionare le rotazioni anche in Internet Explorer 6. Il post è stato scritto quasi due anni fa e attualmente la versione 6 di Continue Reading »
Le rotazioni CSS3 possono essere finalmente cross-browser grazie all’adozione da parte di Internet Explorer della proprietà -ms-transform. Ho appena letto questo interessante post di Samuli Hakoniemi su una soluzione cross-browser per far funzionare le rotazioni anche in Internet Explorer 6. Il post è stato scritto quasi due anni fa e attualmente la versione 6 di Explorer sta letteralmente esalando gli ultimi respiri, quindi usare il file HTC descritto nell’articolo è consigliabile solo nel caso in cui abbiate un pubblico particolarmente vasto o con una percentuale di utenti di IE6 al di sopra del 4 o 5%. Vediamo come scrivere una regola cross-browser che comprenda anche Internet Explorer.
Il codice è molto semplice:
|
1 2 3 4 5 6 |
#box {
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
} |
A detta dell’autore dell’articolo la proprietà sopra indicata dovrebbe funzionare dalla versione 7 di Internet Explorer, ma vi consiglio di effettuare come sempre dei test. Il demo di Samuli si trova qui.
2 commenti
Ho fatto il test su IE7 e IE8 e non funziona.
Solo su IE9, in questi casi aconsiglio di usare un jquery per identificare qualle la versione e se è IE9 utiliza questo mettodo, caso no sostituisce per un’immagine.
Grazie mille Riccardo! Non ho potuto testare direttamente su IE7 e 8 e mi sono fidato dell’articolo citato. In effetti mi sembrava strano, perchè leggendo la documentazione MSDN sui browser da te citati non compare nessun riferimento a
-ms-transform. Da quello che so, fin da IE6 c’era un supporto alle rotazioni, ma solo sulle immagini e con la proprietàfilter. :-)Trackback
I commenti sono chiusi.