Prefixfree: Usare proprietà css3 senza alcun prefisso

Chi ha dimestichezza nell’uso di CSS3 avrà sicuramente notato come alcune proprietà richiedono l’uso di un prefisso variabile in base al browser d’uso.

Portiamo ad esempio la definizione di una transizione CSS3. Come ben sappiamo queste sono supportate dai più moderni browser, ma ognuno di loro (tranne IE dalla v.10 in poi) definisce tale transizione mediante l’uso di un prefisso particolare.


4.0
-moz-transform-

1.0
-webkit-
3.2
-webkit-

10.5
-o-

10

Cosa fare per evitare la duplicazione di codice, scrivendo proprietà css3 senza alcun prefisso?

In questo articolo viene proposta una soluzione, basata sull’uso della libreria javascript chiamata prefixfree.

Per meglio capire la potenzialità di tale libreria, mostro subito un caso d’uso:


-moz-transition-property:height;
-moz-transition-duration:1s;
-o-transition-property:height;
-o-transition-duration:1s;
-webkit-transition-property:height;
-webkit-transition-duration:1s;

Sarà sostituito da queste due righe:


transition-property:height;
transition-duration:1s;

A questo indirizzo troviamo ulteriori esempi d’uso:
Sito web

Michele Pierri

Sviluppatore android/web/desktop, blogger, nonchè sostenitore incallito dell'universo Cloud Computing, nel tempo libero amo fare sport e praticare arti marziali.