Pedido de declaraciones CSS específicas del proveedor

Creo que he escrito algo como lo siguiente mil veces ahora: 

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

Pero solo ahora he pensado si el orden de los que es importante? Sé que entre -moz-* y -webkit-* no importa, ya que a lo sumo se leerá 1 de ellos, pero ¿es mejor (en términos de preparación para el futuro, etc.) hacer el estándar W3C primero o último?

Author: nickf, 2011-08-16
Source

2 answers

La mejor práctica es indiscutiblemente que la propiedad no fijada dure: 

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

El ú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 para border-radius debe coincidir con lo que está en la especificación.

Es preferible usar la implementación del W3C cuando esté disponible, para ayudar a asegurar la consistencia entre todos los navegadores que lo soportan.

 48
Author: thirtydot,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-05 11:22:14

Ordenar es importante. Para preparar su código para el futuro, debe hacer que las especificaciones del W3C sean las últimas, por lo que la cascada lo favorece por encima de las versiones prefijadas por el proveedor.

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

Por ejemplo, digamos que en el futuro Google Chrome soporta el border-radius, pero también soporta el -webkit-border-radius para la compatibilidad hacia atrás con sus versiones anteriores. Cuando Chrome encuentra esta clase .foo ahora verá primero el-webkit, luego verá el estándar, y por defecto al estándar (e ignorar webkit).

 19
Author: Moses,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-16 15:23:36