Question

CSS3规则带来了许多有趣的功能。

以border-radius为例。标准说如果你写这个规则：

div.rounded-corners {
  border-radius: 5px;
}

我应该获得5px的边界半径。

但是mozilla和webkit都没有实现这一点。但是，它们使用相同的参数实现相同的功能，使用不同的名称（分别为-moz-border-radius和-webkit-border-radius）。

为了满足尽可能多的浏览器，您最终会得到这样的结果：

div.rounded-corners {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

我可以看到两个明显的缺点：

复制粘贴代码。这有明显的风险，我不会在这里讨论。
W3C CSS validator不会验证这些规则。

与此同时，我没有看到任何明显的优势。

我相信mozilla和webkit背后的人比我更聪明。必须有一些很好的理由让事情以这种方式结构化。只是我看不到它们。

所以，我必须问你们：这是为什么？

Answer 1

-moz-border-radius描述了Mozilla的语义。如果CSS3以不同的语义发布，那么Mozilla总是可以使用那些语义来实现border-radius，并且它们不会破坏任何人的网站。

同时，如果他们直接使用border-radius，那么如果CSS3以不同的语义发布，Mozilla必须在打破人们的网站或永远支持非标准CSS之间做出选择。

Answer 2

他们这样做是因为它没有完全支持。这就像测试中的代码一样。最终他们将添加对border-radius的支持。

当您查看线性渐变时，这一点更为明显。

background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

请注意，它们不使用相同的语法。当他们最终同意一个标准时，两者都添加了对线性渐变的支持并使用正确的语法。

Answer 3

简单。专有变体-moz和-webkit在之前 border-radius被写入CSS3建议。他们有自己的实现，但不知道这些是否符合W3C的最终建议。因此，他们现在也没有使用现在的正式名称，以免日后破坏。

Answer 4

请注意as of 2010-09-14，-moz前缀已从border-radius中删除。这意味着Firefox 4将支持没有前缀的border-radius。

为什么mozilla和webkit将-moz-和-webkit-加入CSS3规则？

4 个答案: