Ordinazione di dichiarazioni CSS specifici del produttore

Question

credo di aver scritto qualcosa come le seguenti mille volte:

.foo { 
    border-radius: 10px;   /* W3C */ 
    -moz-border-radius: 10px; /* Mozilla */ 
    -webkit-border-radius: 10px; /* Webkit */ 
} 

Ma solo ora ho ho pensato se l'ordinamento di queste è importante? So che tra -moz-* e -webkit-* non importa, dal momento che al massimo uno di questi sarà letto, ma è meglio (in termini di prova del futuro, ecc.) Per fare lo standard W3C prima o l'ultima?

Answer 1

La pratica migliore è indiscutibilmente di avere la proprietà senza prefisso ultima:

.foo { 
    -moz-border-radius: 10px; /* Mozilla */ 
    -webkit-border-radius: 10px; /* Webkit */ 
    border-radius: 10px;   /* W3C */ 
} 

Quale è l'ultimo di -webkit-border-radius e border-radius sarà quella che viene utilizzato.

-webkit-border-radius è la proprietà "experimental" - l'implementazione può contenere deviazioni dalla specifica. L'implementazione per border-radius deve corrispondere a quanto indicato nelle specifiche.

È preferibile disporre dell'implementazione W3C utilizzata quando è disponibile, per garantire la coerenza tra tutti i browser che la supportano.

Answer 2

L'ordine è importante. A prova di futuro il tuo codice è necessario per far sì che le specifiche del W3C arrivino per ultime, quindi la cascata le favorisce al di sopra delle versioni con prefisso del venditore.

.foo { 
    -moz-border-radius: 10px; /* Mozilla */ 
    -webkit-border-radius: 10px; /* Webkit */ 
    border-radius: 10px;   /* W3C */ 
} 

Ad esempio, consente di dire lungo la strada di Google Chrome supporta la border-radius, ma supporta anche la -webkit-border-radius per la compatibilità con le versioni precedenti. Quando Chrome rileva questa classe .foo ora vedrà prima il -webkit, quindi vedrà lo standard e verrà impostato sullo standard (ignorando il webkit).