Cosa sono il fornitore CSS o il prefisso del browser?

I prefissi dei fornitori CSS, noti anche come prefissi dei browser CSS, sono un modo per i produttori di browser di aggiungere il supporto per le nuove funzionalità CSS prima che tali funzionalità siano pienamente 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.

Quando è stato introdotto per la prima volta CCS3, un numero di proprietà eccitate ha iniziato a colpire diversi browser in momenti diversi. Ad esempio, i browser basati su Webkit (Safari e Chrome) sono stati i primi a introdurre alcune proprietà di stile di animazione come la trasformazione e la transizione. Usando le proprietà con prefisso dei fornitori, i web designer sono stati in grado di utilizzare queste nuove funzionalità nel loro lavoro e averli visti sui browser che li supportavano subito, invece di dover aspettare che tutti gli altri produttori di browser lo raggiungessero!

Quindi, dal punto di vista di uno sviluppatore web front-end, i prefissi del browser vengono utilizzati per aggiungere nuove funzionalità CSS su un sito pur avendo la comodità di sapere che i browser supporteranno tali 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 è possibile utilizzare (ognuno dei quali è specifico per un altro browser) sono:

Android:
-webkit-
Cromo:
-webkit-
Firefox:
-moz-
Internet Explorer:
-Signorina-
iOS:
-webkit-
Musica lirica:
-o-
Safari:
-webkit-

Nella maggior parte dei casi, per utilizzare una nuova proprietà di stile CSS, si prende la proprietà CSS standard e si aggiunge il prefisso per ciascun browser. Le versioni con prefisso verrebbero sempre prima (nell'ordine che preferisci) mentre la normale proprietà CSS verrà per ultima. Ad esempio, se si desidera aggiungere una transizione CSS3 al documento, si utilizzerà il comando

transizione

proprietà come mostrato di seguito:

-webkit- transizione: tutti i 4s si rilassano; -moz- transizione: tutti i 4s si rilassano; -Signorina- transizione: tutti i 4s si rilassano; -o- transizione: tutti i 4s si rilassano;transizione: tutti i 4s si rilassano;

Nota: Ricorda, alcuni browser hanno una sintassi diversa per certe proprietà rispetto ad altri, quindi non dare per scontato che la versione con prefisso browser di una proprietà sia esattamente la stessa della proprietà standard. Ad esempio, per creare un gradiente CSS, si usa il

lineare gradiente
proprietà. Firefox, Opera e le versioni moderne di Chrome e Safari utilizzano tale proprietà con il prefisso appropriato mentre le versioni precedenti di Chrome e Safari utilizzano la proprietà con prefisso

-webkit gradiente
. Inoltre, Firefox utilizza valori diversi da quelli standard.

Il motivo per cui si termina sempre la dichiarazione con la versione normale e non prefissata della proprietà CSS è che, quando un browser supporta la regola, la utilizzerà. Ricorda come viene letto il CSS. Le regole successive hanno la precedenza su quelle precedenti se la specificità è la stessa, quindi un browser leggerà la versione del venditore di una regola e la userà se non supporta quella normale, ma una volta eseguita, sostituirà la versione del fornitore con la vera regola CSS.

I prefissi dei fornitori non sono un attacco

Quando sono stati introdotti i prefissi dei fornitori, molti professionisti del Web si sono chiesti se fossero un hack o uno spostamento indietro nei giorni bui del biforcarsi codice di un sito Web per supportare diversi browser (ricorda quelli " Questo sito è ottimizzato per IE "messaggi) I prefissi dei fornitori di CSS non sono hack, tuttavia, e non dovresti avere riserve sul loro utilizzo nel tuo lavoro.

Un hack CSS sfrutta i difetti nell'implementazione di un altro elemento o proprietà al fine di far funzionare correttamente un'altra proprietà. Ad esempio, il modello di casella hack ha sfruttato i difetti nell'analisi del file

voice-family
o in che modo i browser analizzano i backslash (

). 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 di box e come Netscape l'ha interpretato, e non ha nulla a che fare con lo stile della famiglia di voci. Per fortuna questi due browser obsoleti sono quelli che non ci interessano in questi giorni.

Un prefisso del venditore non è un trucco perché consente alle specifiche di impostare regole su come una proprietà può essere implementata, mentre allo stesso tempo consente ai creatori di browser di implementare una proprietà in un modo diverso senza interrompere tutto il resto. Inoltre, questi prefissi stanno funzionando con le proprietà CSS finirà per essere una parte della specifica . Stiamo semplicemente aggiungendo del codice per poter accedere presto alla proprietà. Questo è un altro motivo per cui si termina la regola CSS con la proprietà normale, non prefissata. In questo modo è possibile rilasciare le versioni con prefisso una volta raggiunto il supporto completo del browser.

Vuoi sapere qual è il supporto del browser per una determinata funzionalità? Il sito CanIUse.com è una risorsa meravigliosa per raccogliere queste informazioni e per farti sapere quali browser e quali versioni di tali browser supportano attualmente una funzione.

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, solo 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;border-radius: 10px 5px;
Ma ora che i browser sono arrivati a supportare pienamente questa funzione, hai davvero bisogno solo della versione standardizzata:

border-radius: 10px 5px;
Chrome ha supportato la proprietà CSS3 dalla versione 5.0, Firefox l'ha aggiunto nella versione 4.0, Safari l'ha aggiunto in 5.0, Opera in 10.5, iOS in 4.0 e Android in 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 meno recenti, a meno che tu non stia pianificando di creare pagine web che sono indietro di anni rispetto ai metodi più moderni. Alla fine, scrivere i prefissi del browser è molto più facile che trovare e sfruttare gli errori che molto probabilmente verranno corretti in una versione futura, richiedendo di trovare un altro errore da sfruttare e così via.