orden de las declaraciones CSS específicos del proveedor

Question

Creo que he escrito algo así como los siguientes mil veces:

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

Pero sólo ahora he pensado acerca de si el orden de los es importante? Sé que entre -moz-* y -webkit-* no importa, ya que como mucho 1 de ellos será leído, pero ¿es mejor (en términos de futuro, etc.) para hacer el estándar W3C primero o el último?

Answer 1

La mejor práctica es indiscutiblemente tener la propiedad sin prefijo última:

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

Cualquiera que sea la última de -webkit-border-radiusborder-radius y será el que se utiliza.

-webkit-border-radius es la propiedad "experimental": la implementación puede contener desviaciones de la especificación. La implementación para border-radius debe coincidir con lo que está en la especificación.

Es preferible tener la implementación W3C utilizada cuando está disponible, para ayudar a garantizar la coherencia entre todos los navegadores que la admiten.

Answer 2

El pedido es importante. Para garantizar su código en el futuro, necesita hacer que la especificación W3C sea la última, por lo que la cascada lo favorece por encima de las versiones prefijadas del proveedor.

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

Por ejemplo, digamos en el camino Google Chrome soporta el border-radius, pero también es compatible con la compatibilidad hacia atrás con -webkit-border-radius de sus versiones anteriores. Cuando Chrome se encuentre con esta clase .foo, ahora verá primero -webkit, luego verá el estándar, y de forma predeterminada será el estándar (e ignorará webkit).