Заказ специфических для CSS объявлений CSS

Question

Я думаю, что я написал что-то вроде следующего тысячу раз сейчас:

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

Но только теперь я подумал о том, важен ли порядок тех? Я знаю, что между -moz-* а также -webkit-* это не имеет значения, поскольку будет прочитано не более 1 из них, но лучше ли (с точки зрения обеспечения будущего и т. д.) применять стандарт W3C первым или последним?

Answer 1

Лучшая практика неоспоримо иметь свойство без префикса последнего:

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

Какой последний из -webkit-border-radius а также border-radius будет тот, который используется.

-webkit-border-radius является "экспериментальным" свойством - реализация может содержать отклонения от спецификации. Реализация для border-radius должно соответствовать тому, что в спецификации.

Предпочтительно использовать реализацию W3C, когда она доступна, чтобы обеспечить согласованность между всеми браузерами, которые ее поддерживают.

Answer 2

Заказ важен. Чтобы в будущем проверить ваш код, нужно, чтобы спецификация W3C была последней, поэтому каскад предпочитает его над версиями с префиксом производителя.

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

Например, скажем, в будущем Google Chrome поддерживает border-radius, но это также поддерживает -webkit-border-radius для обратной совместимости с предыдущими версиями. Когда Chrome встречает это .foo Теперь класс увидит -webkit, затем увидит стандарт и по умолчанию установит стандарт (и проигнорирует webkit).