Question

我们像这样使用css规则......

-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;  /* this must be at last ? */

为什么我最初不应该像这样使用它......

border-radius: 8px; /* why not to use at first ? */
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;

更新

有人能告诉我一个首先使用它的错误的例子吗？

Answer 1

这个想法是，一旦规则被标准化，将推翻其他风格。由于标准规则位于底部，因此如果浏览器知道如何，则将使用它来代替供应商特定规则。这允许标准化，同时仍然支持当前的实现。

在第二个示例中，如果浏览器支持两者，则供应商特定规则将覆盖标准化规则。供应商特定的实现可能会从规范中推迟，最好在最终确定时更好地使用统一规范，以便更轻松地进行跨浏览器更改。

Answer 2

在编写CSS3属性时，现代智慧是最后列出“真实”属性，首先列出供应商前缀：

.not-a-square {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

为什么这种常用的物质排序方法如此普遍？这就是“the wrong way":

的样子

.not-a-square {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

即使以“错误的方式”做到这一点，不管边界半径都不一样，永远不会？快速调查可能会让您得出结论，这种属性的排序是相当无意义的。

Long Long Ago：不支持任何属性，顺序无关紧要。过去：仅支持供应商前缀，订单无关紧要。 Now：支持供应商前缀和实际属性。如果前缀是最后一个，它将覆盖实际属性，但两者都是相同的。未来：只支持实际属性，顺序无关紧要。