Qual è la ragione per inserire prefissi nelle nuove funzionalità CSS?

Naviga le tue risposte
9

Esiste un motivo valido per i browser che prefiggono nuove funzionalità CSS, invece di consentire ai webmaster di utilizzare la versione non prefissata?

Ad esempio, un codice di esempio per il gradiente di sfondo ha il seguente aspetto: 

#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);
}

Che senso ha obbligare 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 devono essere temporanei, mentre il browser non implementa correttamente la specifica, oppure la specifica non è definitiva .

IMO, questo motivo non ha senso:

  • Se il motore del browser non implementa correttamente la specifica, il browser non sarà conforme, non importa se non lo implementa in un modulo non prefissato o non lo implementa in un modulo con prefisso.
  • Se la specifica non è definitiva, può essere importante quando esistevano precedenti implementazioni con lo stesso nome. Ad esempio se CSS2 avesse linear-gradient , ma CSS3 era inteso ad estendere linear-gradient con funzionalità aggiuntive, sarebbe intelligente per prefisso temporaneo la nuova bozza, implementazione da -css3-<style> differenziazione tra quella funzionante CSS2 e la sperimentale CSS3 uno. In pratica, i CSS2 non hanno linear-gradient o altre novità CSS3.

Capirei anche se diversi browser avessero formati di implementazione diversi : ad esempio diciamo che è richiesto Firefox, per ombreggiatura del testo, <weight-of-shadow distance-x distance-y color> , mentre Chrome ha richiesto <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.

    
posta Arseni Mourzenko 01.09.2011 - 16:52
fonte

3 risposte

9

In base a questa nota W3C :

To avoid clashes with future CSS features, the CSS2.1 specification reserves a prefixed syntax for proprietary and experimental extensions to CSS.

Prior to a specification reaching the Candidate Recommendation stage in the W3C process, all implementations of a CSS feature are considered experimental. The CSS Working Group recommends that implementations use a vendor-prefixed syntax for such features, including those in W3C Working Drafts. This avoids incompatibilities with future changes in the draft.

Puoi seguire lo stato del CSS qui e here .

    
risposta data 01.09.2011 - 17:08
fonte
3

I would also understand if different browsers had different implementation formats ... [b]ut actually, this is not the case; at least all new features of CSS3 I've used so far had the same format.

Questo mi dice che non hai giocato a questo gioco abbastanza a lungo.

Il problema è che i browser mai implementano nuove funzionalità allo stesso modo. È normale vedere un browser implementare funzionalità che non sono state standardizzate e il risultato è che tutto funziona in modo diverso su browser diversi.

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

Questo causa un mal di testa per gli sviluppatori che cercano di utilizzare nuove funzionalità. Dopo aver finito di scrivere il loro foglio di stile, si rendono subito conto che si presenta in modo diverso su diversi browser per ragioni inspiegabili.

Prima che arrivassero i prefissi, gli sviluppatori dovevano fare affidamento su differenze rilevabili tra i browser, spesso sfruttando gli errori nel parser CSS. Ciò ha provocato abomini come questo: 

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

Questi tipi di hack erano il risultato del tentativo di uno sviluppatore di personalizzare il proprio foglio di stile per ogni browser, utilizzando qualsiasi tipo di metodi stravaganti che potevano trovare.

Standardizzando i prefissi, consente agli sviluppatori di utilizzare funzionalità che non sono stabili tra diversi browser. I prefissi -moz- e -webkit- rendono abbondantemente chiaro che l'autore sta cercando di fornire uno stile che dovrebbe essere applicato solo in determinati browser Web.

Una volta che le funzionalità diventano stabili e i browser iniziano a comportarsi allo stesso modo, puoi rimuovere il prefisso e dichiarare la funzione una sola volta.

Penso che sia importante rendersi conto che i prefissi NON significano che devi dichiarare gli stili una volta per ogni browser. I prefissi significano che devono dichiarare stili aggiuntivi ogni volta che si trova un browser Web non conforme a uno standard. Ad esempio, invece del tuo codice precedente, 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);

All'improvviso la tua pagina appare uguale in tutti i browser, nonostante il fatto che uno di loro abbia fatto le cose in modo diverso.

Troverete che questo è stato trattato in modo esaustivo in questo articolo su A List Apart .

    
risposta data 01.09.2011 - 19:42
fonte
2

If the browser engine does not implement the spec correctly, the browser will not be compliant, no matter if it does not implement it in a non-prefixed form or it does not implement it in a prefixed form.

La differenza è che il browser non rompe la compatibilità quando fa diventa conforme. Se il comportamento del browser è diverso dalla specifica, non si romperà il vecchio codice quando lo cambieranno, perché è elencato con un nuovo nome.

    
risposta data 01.09.2011 - 17:26
fonte

Leggi altre domande sui tag

Conservazione della cronologia del commit del controllo delle versioni vs Refactoring e Documentazione Differenza tra questi 3 ruoli manager [chiuso]