Qual è il motivo per inserire i prefissi nelle nuove funzionalità CSS?

Esiste un motivo valido per i browser di aggiungere il prefisso alle nuove funzionalità CSS, invece di consentire ai webmaster di utilizzare la versione senza prefisso?

Ad esempio, un codice di esempio per il gradiente di sfondo è simile a:

#arbitrary-stops {
  /* fallback DIY*/

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* IE 10 */
  background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Opera 11.10+ */
  background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}

A che serve forzare i webmaster a copiare e incollare lo stesso codice quattro volte per ottenere lo stesso risultato?

Nota: uno dei motivi spesso citati è che gli stili con prefisso sono destinati ad essere temporanei mentre il browser non implementa correttamente le specifiche o le specifiche non sono definitive .

IMO, questa ragione è un'assurdità:

• Se il motore del browser non implementa correttamente le specifiche, il browser non sarà conforme, non importa se non lo implementa in una forma non prefissata o non le implementa in una forma prefissata.
• Se la specifica non è definitiva, può importare quando c'erano implementazioni precedenti con lo stesso nome. Ad esempio, se CSS2 avesse avuto linear-gradient, ma CSS3 fosse destinato a estendersi linear-gradientcon funzionalità aggiuntive, sarebbe stato opportuno prefissare temporaneamente la nuova bozza, l'implementazione -css3-<style>differenziando tra quella CSS2 funzionante e quella CSS3 sperimentale. In pratica, CSS2 non ha linear-gradiento altre novità CSS3.

Vorrei anche capire se browser diversi avevano formati di implementazione diversi : ad esempio diciamo che Firefox è richiesto, per l'ombra del testo <weight-of-shadow distance-x distance-y color>, mentre Chrome richiede <distance-x distance-y weight-of-shadow color>. Ma in realtà, questo non è il caso; almeno tutte le nuove funzionalità di CSS3 che ho usato finora avevano lo stesso formato.

Secondo questa nota del W3C :

Per evitare scontri con le future funzionalità CSS, la specifica CSS2.1 riserva una sintassi prefissata per estensioni proprietarie e sperimentali al CSS.

Prima che una specifica raggiunga la fase di raccomandazione del candidato nel processo W3C, tutte le implementazioni di una funzione CSS sono considerate sperimentali. Il gruppo di lavoro CSS raccomanda che le implementazioni utilizzino una sintassi prefissata dal fornitore per tali funzioni, comprese quelle nei progetti di lavoro del W3C. Questo evita incompatibilità con futuri cambiamenti nella bozza.

Puoi seguire lo stato del CSS qui e qui .

Vorrei anche capire se browser diversi avevano formati di implementazione diversi ... [b] in realtà, non è così; almeno tutte le nuove funzionalità di CSS3 che ho usato finora avevano lo stesso formato.

Questo mi dice che non stai giocando a questo gioco da abbastanza tempo.

Il problema è che i browser Web non implementano mai nuove funzionalità nello stesso modo. È comune vedere un browser implementare funzionalità che non sono state standardizzate e il risultato è che tutto agisce diversamente su browser diversi.

Non solo, le nuove funzionalità sono spesso errate (eviteremo di chiamare IE per nome), e quindi anche se la sintassi per vari elementi è la stessa, il risultato è diverso.

Ciò provoca mal di testa agli sviluppatori che stanno tentando di utilizzare nuove funzionalità. Dopo aver finito di scrivere il loro foglio di stile, si rendono rapidamente conto che viene visualizzato in modo diverso su browser diversi per motivi inspiegabili.

Prima che arrivassero i prefissi, gli sviluppatori erano costretti a fare affidamento su differenze rilevabili tra i browser, spesso sfruttando errori nel parser CSS. Ciò ha comportato abominazioni come questa:

padding: 10px;
width: 200px;
w\idth: 180px;
height: 200px;
heigh\t: 180px;

Questi tipi di hack sono stati il ​​risultato del tentativo di uno sviluppatore di personalizzare il proprio foglio di stile per ciascun browser, utilizzando qualsiasi tipo di metodo stravagante che è riuscito a trovare.

Standardizzando i prefissi, consente agli sviluppatori di utilizzare funzionalità non stabili su diversi browser. I prefissi -moz-e -webkit-indicano chiaramente che l'autore sta cercando di fornire uno stile che dovrebbe essere applicato solo in alcuni browser web.

Quando le funzionalità diventano stabili e i browser iniziano a funzionare allo stesso modo, è possibile rimuovere il prefisso e dichiarare la funzione una volta.

Penso che sia importante capire che i prefissi NON significano che devi dichiarare gli stili una volta per ogni browser. I prefissi indicano che è necessario dichiarare stili aggiuntivi ogni volta che si trova un browser Web non conforme a uno standard. Ad esempio, invece del codice sopra riportato, dovresti iniziare con:

 background: linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

Se improvvisamente ti rendi conto che Microsoft non è in grado di calcolare correttamente un gradiente lineare, puoi aggiungere un prefisso per risolvere il problema su IE:

 /* Friggin IE */
 background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
 background: linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

Improvvisamente la tua pagina appare la stessa in tutti i browser, nonostante uno di loro abbia fatto le cose diversamente.

Scoprirai che questo è stato trattato in modo molto completo in questo articolo su A List Apart .

Se il motore del browser non implementa correttamente le specifiche, il browser non sarà conforme, non importa se non lo implementa in una forma non prefissata o non le implementa in una forma prefissata.

La differenza è che il browser non si romperà la compatibilità quando si fa diventare compatibile. Se il comportamento del browser è diverso dalle specifiche, allora non romperanno il vecchio codice quando lo cambiano, perché è elencato con un nuovo nome.