Заказ объявлений с конкретными поставщиками CSS

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

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

Ответы

Ответ 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-реализацию, когда она доступна, чтобы обеспечить согласованность между всеми браузерами, которые ее поддерживают.

Ответ 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).