CSS Vendor Prefixes: come gestirli al meglio senza impazzire

Gestire tutte le peculiarità dei diversi browser e sfruttare le varie funzionalità del linguaggio CSS3 non è una passeggiata. Vediamo però quali strumenti utilizzare per ridurre al minimo lo stress :-)

I CSS vendor prefixes, conosciuti anche come CSS browser prefixes sono una modalità utilizzata dai vari produttori di browser per supportare determinate caratteristiche del linguaggio CSS. A volte si tratta di un sistema per sperimentare nuove funzionalità non incluse del linguaggio ed altre volte invece sono sfruttati per permettere l’impiego di funzioni che non sono ancora definite come standard.

Se ti capita spesso di lavorare con i fogli di stile, ti sarai già imbattuto in espressioni come queste, relative ai vari browser:

• Chrome: -webkit-
• Firefox: -moz-
• Internet Explorer: -ms-
• iOS: -webkit-
• Opera: -o-
• Safari: -webkit-

E’ quasi superfluo sottolineare quanto gestire tutti questi differenti prefissi sia un lavoro tedioso e spesso foriero di errori.

Per facilitare la vita degli sviluppatori, esistono però numerose soluzioni che rendono un pochino meno ostica la creazione di CSS che sfruttano i CSS Vendor Prefixes.

Eccone alcune:

CSS3, Please

In questa pagina puoi trovare un elenco delle funzionalità utilizzate più di frequente che sfruttano i CSS Vendor Prefixes. E’ molto utile se sei abituato a creare i fogli di stile manualmente, ovvero senza l’ausilio di tecniche come LESS o Sass.

-prefix-free

Si tratta di un piccolo JavaScript che permette di scrivere i propri CSS senza adottare alcun prefisso, ci penserà lui ad inserirli quando la cosa si renderà necessaria. Questa tecnica renderà sicuramente più snello il tuo file CSS, ma il modo in cui la tua pagina web sarà visualizzata dipenderà fortemente dal supporto a JavaScript.

Se utilizzi LESS o Sass

Se invece sei già passato all’utilizzo di tecnologie come LESS o Sass per realizzare e gestire i file CSS, puoi sfruttare Compass o Bourbon (se usi Sass) oppure questi LESS Elements o LESS Hat (se preferisci LESS).

Si tratta in sostanza di librerie di stili che implementano le più comuni funzioni CSS3 come gradienti, box-shadow, animazioni e trasformazioni 3D.

Se invece non ti sei ancora avvicinato a LESS o Sass ti consiglio di dargli un’occhiata, dato che semplificano notevolmente il lavoro di realizzazione e soprattutto di manutenzione di un foglio di stile.

Buon lavoro :-)