attribute - Pedido de declaraciones de CSS específicas del proveedor

title html

Question

Creo que he escrito algo así como lo siguiente mil veces:

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

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

Answer 1

La mejor práctica es indiscutiblemente tener la propiedad no prefijada por última vez:

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

Lo que -webkit-border-radius último de -webkit-border-radius y border-radius será el que se use.

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

Es preferible utilizar la implementación del W3C cuando esté disponible, para ayudar a garantizar la coherencia entre todos los navegadores que la admiten.

Answer 2

Ordenar 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 que en el -webkit-border-radius Google Chrome admite el border-radius del border-radius , pero también admite el -webkit-border-radius para compatibilidad con versiones anteriores. Cuando Chrome encuentre esta clase .foo , ahora verá primero -webkit, luego verá el estándar, y se convertirá en el estándar (e ignorará el webkit).