Trasformazioni CSS cross-browser con cssSandpaper

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.