Trasformazioni CSS cross-browser con cssSandpaper
Lunedì 22 Marzo 2010 - 08:23
di Cesare Lamanna
Mentre Microsoft espone sul blog di IE i dettagli implementativi della proprietà border-radius su IE9 e veniamo a sapere che ci sono buone probabilità di vedere presto sul browser di Microsoft l’elemento canvas, c’è da rilevare come per parecchie funzionalità nuove e sperimentali dei CSS3 non sia al momento previsto alcun supporto.
Si sa che volendo sfruttare in maniera cross-browser e sin da ora talune di queste proprietà possiamo affidarci a Javascript, magari appoggiandoci a script e plugin basati sui principali framework. Un esperimento interessante è questo cssSandpaper creato da Zoltan Hawryluk.
Lo script consente di ottenere gli effetti resi possibili dalle trasformazioni CSS anche su IE (le trasformazioni sono da tempo supportate su Safari, Chrome e Firefox, più recentemente, dalla versione 10.50, su Opera). Ecco uno dei tanti esempi proposti.
L’aspetto interessante dello script (ancora in versione beta) è che consente di definire il codice per le trasformazioni direttamente nel CSS, seguendo le regole definite nella specifica. Sarà sufficiente far precedere il nome della proprietà dal prefisso -sand-:
-sand-transform: skew(-17deg, 45deg) rotate(-125deg);
La parte Javascript si esaurisce infatti nella semplice inclusione nella sezione head degli script necessari, tutti presenti nel pacchetto zip da scaricare.
Oltre che per ottenere effetti di trasformazione, cssSandpaper può essere usato per creare su IE box ombreggiati (box-shadow) e gradienti.
Commenti
1
Uno script js molto interessante!
Peccato per gli esempi non proprio entusiasmanti…# - postato da Daniele De Nobili - 22 Marzo 2010 - 10:13