Ordre des déclarations CSS spécifiques au fournisseur

Question

Je pense que j'ai écrit quelque chose comme ce qui suit un millier de fois maintenant :

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

Mais ce n'est que maintenant que j'ai réfléchi à la question de savoir si l'ordre dans lequel ils sont présentés est important. Je sais qu'entre -moz-* y -webkit-* cela n'a pas d'importance, puisqu'au plus un de ces textes sera lu, mais est-ce que c'est le cas ? meilleur (en termes de pérennité, etc.) de faire la norme du W3C en premier ou en dernier ?

Answer 1

La meilleure pratique consiste incontestablement à placer la propriété sans préfixe en dernier :

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

Celui qui arrive en dernière position sur la liste des -webkit-border-radius y border-radius sera celui qui sera utilisé.

-webkit-border-radius est la propriété "expérimentale" - la mise en œuvre peut contenir des écarts par rapport à la spécification. La mise en œuvre de border-radius doit correspondre à ce qui figure dans la spécification.

Il est préférable d'avoir le Mise en œuvre par le W3C lorsqu'il est disponible, afin d'assurer la cohérence entre tous les navigateurs qui le prennent en charge.

Answer 2

Il est important de passer commande. Pour que votre code soit à l'épreuve du temps, vous devez faire passer la spécification du W3C en dernier, afin que la cascade la favorise par rapport aux versions préfixées par les fournisseurs.

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

Par exemple, imaginons que Google Chrome prenne en charge la fonction border-radius mais il prend également en charge le -webkit-border-radius pour une compatibilité descendante avec ses versions antérieures. Lorsque Chrome rencontre ce .foo maintenant, il verra d'abord -webkit, puis il verra le standard, et il prendra par défaut le standard (et ignorera webkit).