Cosa sono i fornitori CSS o i prefissi del browser?

Prefissi dei fornitori CSS, a volte noti anche come or CSS prefissi del browser, sono un modo per i produttori di browser di aggiungere supporto per nuove funzionalità CSS prima che queste funzioni siano completamente supportate in tutti i browser. Questo può essere fatto durante una sorta di periodo di test e sperimentazione in cui il produttore del browser sta determinando esattamente come verranno implementate queste nuove funzionalità CSS. Questi prefissi sono diventati molto popolari con l'ascesa di CSS3 alcuni anni fa.

Origini dei prefissi del venditore

Quando è stato introdotto per la prima volta CCS3, una serie di proprietà entusiasmanti ha iniziato a colpire browser diversi in momenti diversi. Ad esempio, i browser basati su Webkit (Safari e Chrome) sono stati i primi a introdurre alcune delle proprietà dello stile di animazione come la trasformazione e la transizione. Usando il prefisso del fornitore proprietà, i web designer sono stati in grado di utilizzare queste nuove funzionalità nel loro lavoro e di vederle sui browser che li ha supportati immediatamente, invece di dover aspettare che ogni altro produttore di browser li prenda su!

Prefissi comuni

Quindi, dal punto di vista di uno sviluppatore web front-end, i prefissi del browser vengono utilizzati per aggiungere nuove funzionalità CSS a un sito pur avendo la certezza che i browser supporteranno quegli stili. Ciò può essere particolarmente utile quando diversi produttori di browser implementano le proprietà in modi leggermente diversi o con una sintassi diversa.

I prefissi del browser CSS che puoi utilizzare (ognuno dei quali è specifico per un browser diverso) sono:

• Android:

  -webkit-

• Cromo:

  -webkit-

• Firefox:

  -moz-

• Internet Explorer:

  -SM-

• iOS:

  -webkit-

• Musica lirica:

  -o-

• Safari:

  -webkit-

Aggiunta di un prefisso

Nella maggior parte dei casi, per utilizzare una nuovissima proprietà di stile CSS, prendi la proprietà CSS standard e aggiungi il prefisso per ciascun browser. Le versioni con prefisso verranno sempre per prime (nell'ordine che preferisci) mentre la normale proprietà CSS verrà per ultima. Ad esempio, se desideri aggiungere una transizione CSS3 al tuo documento, utilizzerai la proprietà di transizione come mostrato di seguito:

-webkit-transition: facilità tutti e 4;
-moz-transition: tutti i 4s facilitano;
-ms-transizione: facilita tutti i 4s;
-o-transizione: facilita tutti i 4;
transizione: tutti i 4s facilitano; 

Ricorda, alcuni browser hanno una sintassi diversa per determinate proprietà rispetto ad altri, quindi non presumere che la versione con prefisso del browser di una proprietà sia esattamente la stessa della proprietà standard. Ad esempio, per creare un gradiente CSS, si utilizza la proprietà linear-gradient. Firefox, Opera e le versioni moderne di Chrome e Safari utilizzano tale 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 da quelli standard.

Il motivo per cui termini sempre la tua dichiarazione con la versione normale e senza prefisso della proprietà CSS è che quando un browser supporta la regola, utilizzerà quella. Ricorda come vengono letti i CSS. Le regole successive hanno la precedenza su quelle precedenti se la specificità è la stessa, quindi un browser leggerebbe la versione del fornitore di a regola e usa quella se non supporta quella normale, ma una volta che lo fa, sovrascriverà la versione del fornitore con il CSS effettivo regola.

I prefissi dei fornitori non sono un hack

Quando sono stati introdotti per la prima volta i prefissi dei fornitori, molti professionisti del web si sono chiesti se fossero un hack o un torna ai giorni bui del fork del codice di un sito Web per supportare browser diversi (ricorda che "Questo sito è meglio visto in IE" Messaggio). Tuttavia, i prefissi dei fornitori di CSS non sono hack e non dovresti avere riserve sull'utilizzo di essi nel tuo lavoro.

Un hack CSS sfrutta i difetti nell'implementazione di un altro elemento o proprietà per far funzionare correttamente un'altra proprietà. Ad esempio, il box model hack sfruttava i difetti nell'analisi della famiglia vocale o nel modo in cui i browser analizzano le barre rovesciate \. Ma questi hack sono stati usati per risolvere il problema della differenza tra il modo in cui Internet Explorer 5.5 ha gestito il modello box e il modo in cui Netscape interpretato, e non hanno nulla a che fare con lo stile della famiglia vocale. Per fortuna questi due browser obsoleti sono quelli di cui non dobbiamo preoccuparci in questi giorni.

Un prefisso del fornitore non è un hack perché consente alla specifica di impostare regole su come una proprietà potrebbe essere implementata, mentre allo stesso tempo consente ai produttori di browser di implementare una proprietà in un modo diverso senza rompere tutto altro. Inoltre, questi prefissi funzionano con proprietà CSS che alla fine farà parte delle specifiche. Stiamo semplicemente aggiungendo un codice per accedere in anticipo alla proprietà. Questo è un altro motivo per cui termini la regola CSS con la normale proprietà senza prefisso. In questo modo puoi eliminare le versioni prefissate una volta ottenuto il supporto completo del browser.

I prefissi dei fornitori sono fastidiosi ma temporanei

Sì, potrebbe sembrare fastidioso e ripetitivo dover scrivere le proprietà 2-5 volte per farlo funzionare in tutti i browser, ma è una situazione temporanea. Ad esempio, fino a pochi anni fa, per impostare un angolo arrotondato su una scatola dovevi 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;
bordo-raggio: 10px 5px; 

Ma ora che i browser supportano completamente questa funzione, hai davvero solo bisogno della versione standardizzata:

bordo-raggio: 10px 5px; 

Chrome ha supportato la proprietà CSS3 dalla versione 5.0, Firefox l'ha aggiunta nella versione 4.0, Safari l'ha aggiunta nella 5.0, Opera in 10.5, iOS in 4.0 e Android nella 2.1. Anche Internet Explorer 9 lo supporta senza prefisso (e IE 8 e versioni precedenti non lo supportavano con o senza prefissi).

Ricorda che i browser cambieranno sempre e saranno necessari approcci creativi per supportare i browser più vecchi, a meno che tu non abbia intenzione di farlo costruire pagine web che sono anni indietro rispetto ai metodi più moderni. Alla fine, scrivere i prefissi del browser è molto più semplice che trovare e sfruttare errori che molto probabilmente verranno corretti in una versione futura, richiedendo di trovare un altro errore da sfruttare e così via.