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

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

44 голосов
/ 16 августа 2011

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

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

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

Ответы [ 2 ]

49 голосов
/ 16 августа 2011

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

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

19 голосов
/ 16 августа 2011

Заказ важен. Чтобы в будущем проверить ваш код, вам нужно, чтобы спецификация 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).

...