CSS3 属性的排序

在编写 CSS3 属性时，现代的智慧是将“真实”属性放在最后，将供应商前缀放在前面

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

为什么这种属性排序方法是 如此普遍地被教授？以下是“错误方法”的样子

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

即使使用“错误方法”，边框半径永远不会相同吗？快速调查可能会让你得出结论，它会相同，这种属性排序是毫无意义的。

1. 很久以前：没有任何属性被支持，顺序无关紧要。
2. 过去：只支持供应商前缀，顺序无关紧要。
3. 现在：供应商前缀和实际属性都得到支持。如果前缀在最后，它将覆盖实际属性，但两者都是相同的。
4. 未来：只支持实际属性，顺序无关紧要。

这是一个简单的图表，其中包含此概念的实际应用。

等等，牛仔

事实上，CSS3 属性的排序很重要，以上说法从根本上是有缺陷的。“现在”正是问题所在。我们正处在浏览器历史的关键时刻，一些浏览器同时支持供应商前缀版本和实际 CSS3 属性。目前，具体来说是 WebKit 正在这样做，他们实现它的方式是，如果你将供应商前缀列在实际属性之后，供应商前缀将覆盖并成为渲染的属性。

为什么这很重要？在我们上面看到的简单的 border-radius 示例中，无论哪种方式，该元素的角都会有 10px 的边框半径。供应商前缀和“真实”属性在仅设置一个值时处理圆角的方式没有区别。问题在于，当传递多个值时，属性实现之间存在差异。

.not-a-square {
   /* These do totally different things */
   border-radius: 30px 10px; 
   -webkit-border-radius: 30px 10px;
}

规范或“真实”版本将渲染左上角和右下角为 30px，渲染右上角和左下角为 10px。供应商前缀将渲染所有四个角为宽度 30px、高度 10px 的椭圆角。

因此，如果你一直盲目地将真正的border-radius放在属性列表的末尾，使用相同的数值，然后从 Safari 4 切换到 Safari 5，你将会看到上述代码对你的框进行样式的方式发生了巨大变化。

你可以通过调整数值来修复这个问题，以确保它们做相同的事情……但是，如果你要调整任何东西，你也可以调整真正的属性，因为这将在未来被支持。将真正的属性放在最后绝对是最好的做法。因为它将完全基于规范，它将与其他浏览器的实现相匹配，并且随着时间的推移，供应商前缀被移除后，它将成为唯一支持的版本。

边框半径并非唯一的例子。请注意 background-image 渐变的显著不同的语法。现在还没有这些值的“真实”规范版本，但是如果有，实现将与我们现在使用的不同。这应该在属性排序中放在最后，以防范未来出现这种情况。

感谢 @mattwiebe 和 @snookca 帮助我更好地理解这一点。