I prefissi vendor (o prefissi browser) dei CSS sono un modo che i produttori di browser hanno per aggiungere il supporto per nuove funzionalità CSS in una sorta di periodo sperimentale. I prefissi vendor vengono utilizzati per aggiungere nuove funzionalità che non possono far parte di una specifica formale, e per implementare funzionalità di una specifica che non è stata ancora ultimata.

I prefissi vendor CSS sono:

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

Nella maggior parte dei casi, per utilizzare una proprietà di stile CSS più avanzata, si aggiunge (per ciascun browser) il corrispondente prefisso di cui sopra alla proprietà CSS standard. Ad esempio, se si desidera aggiungere una transizione CSS3 al documento, si dovrebbe utilizzare la proprietà di transizione con i seguenti prefissi:

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

Nota: non date per scontato che la versione con prefisso di una proprietà corrisponda esattamente alla proprietà standard. Ad esempio, per creare un gradiente CSS, si utilizza la proprietà linear-gradient. Firefox, Opera, e versioni moderne di Chrome e Safari utilizzano la proprietà con il prefisso appropriato, mentre le prime versioni di Chrome e Safari utilizzano la proprietà con prefisso webkit-gradient. Inoltre, Firefox utilizza valori diversi rispetto agli standard.

I Prefissi Vendor non sono un Hack

Un hack CSS sfrutta difetti nella implementazione di un altro elemento o proprietà, al fine di far sì che un’altra proprietà funzioni correttamente.

Ad esempio, il box model hack sfrutta falle nel parsing della proprietà voice-family o nel modo in cui i browser interpretano i back-slash (\). Ma questi hack sono utilizzati per risolvere il problema della differenza tra come Internet Explorer 5.5 ha gestito il box model e come lo ha invece interpretato Netscape, e non hanno nulla a che fare con lo stile voice-family.

Un prefisso vendor non è un hack perché consente alla specifica di impostare regole su come una proprietà potrebbe essere implementata, e contestualmente permette ai produttori di browser di implementare una proprietà in modo diverso senza “rompere” tutto il resto.

Essi inoltre consentono ai produttori di browser di creare nuove funzionalità nei loro browser prima che arrivi la specifica, utilizzando i prefissi per informare che queste proprietà sono “in progress”.

Invece di essere un hack, prefissi vendor sono un approccio proattivo per prevenire i problemi prima che si verifichino.

I Prefissi Vendor sono Noiosi ma Temporanei

Quando utilizzate i prefissi browser con il prefisso standard precedentemente elencato, state impostando le vostre pagine web per essere a prova di futuro. I browser che utilizzano i prefissi li useranno e ignoreranno le proprietà che non comprendono. I browser che sono in grado di supportare le proprietà basate sugli standard le implementeranno perché sono elencate per ultime nel vostro foglio di stile.

Sì, potrebbe risultare fastidioso e ripetitivo dover scrivere le proprietà 2-5 volte per farle funzionare in tutti i browser, ma è una cosa temporanea. I browser evolvono, aggiungendo il supporto per la versione della proprietà basata sugli standard, e a quel punto è possibile rimuovere le versioni con i prefissi. Ad esempio, solo pochi anni fa, per impostare un angolo arrotondato su una casella si doveva scrivere:

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;

mentre ora è sufficiente utilizzare la versione standardizzata:

border-radius: 10px 5px;

Chrome ha inserito la proprietà CSS3 partire dalla versione 5.0, Firefox la ha aggiunta nella versione 4.0, Safari nella 5.0, Opera nella 10.5, iOS nella 4.0 e Android nella 2.1. Anche Internet Explorer 9 la supporta senza prefisso (mentre IE 8 e precedenti non la supportano né con né senza prefissi).

Ricordate che i browser sono i continua evoluzione e qualche hack sarà richiesto, a meno di non avere intenzione di progettare pagine web che sono arretrate di anni rispetto ai metodi più moderni. Scrivere i prefissi browser è molto più facile che trovare e sfruttare errori che molto probabilmente verranno risolti nelle versioni successive, facendo sì che dobbiate trovare un altro errore di sfruttare e così via.

La Soluzione Rapida

Esiste uno script che consente di scrivere proprietà senza prefisso, in quanto lavora “dietro le quinte”, aggiungendo il prefisso del browser utilizzato a qualsiasi codice CSS, solo quando è necessario.

Potete trovarlo qui:

http://leaverou.github.io/prefixfree/