3

使用供应商前缀时，请务必记住您在声明中列出规则的顺序。

我已经知道供应商前缀是如何工作的以及为什么需要，但为什么最好首先列出供应商前缀的属性，最后列出非前缀的 CSS3 属性？我还检查了许多重要站点，他们正在使用这种方法：

.foo { 
  -webkit-border-radius: 10px; 
  -moz-border-radius: 10px; 
  border-radius: 10px; //why this is the last one?
  }

就是这样，为什么要把实际的 CSS3 属性放在最后呢？有什么特殊原因吗？

4

3 回答 3

3

由于最后的 W3C 特性，新版本的浏览器使用此版本而不是供应商版本。这样，您的 CSS 将被视为没有供应商前缀的普通 CSS。

这样，如果浏览器支持，新浏览器将使用更新到最新规范的 W3C 版本。

于 2013-02-18T10:29:18.370 回答
1

有用的资源是http://taligarsiel.com/Projects/howbrowserswork1.htm和http://www.w3.org/TR/CSS2/grammar.html，也许你会在那里找到答案。

于 2013-02-18T10:29:15.193 回答
1

这是一个很好的理由：[安迪提到的这篇文章的摘要]

在浏览器同时支持供应商前缀和实际属性的期间 - css 规则的实现可能存在差异。

例子：

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

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

于 2013-02-18T11:56:10.010 回答