6

CSS3 规则带来了许多有趣的特性。

以边界半径为例。该标准规定，如果您编写此规则：

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 验证器不会验证这些规则。

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

我相信 Mozilla 和 webkit 背后的人比我自己更聪明。必须有一些充分的理由以这种方式构建事物。只是我看不到他们。

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

4

4 回答 4

6

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

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

于 2010-05-28T17:07:01.160 回答
3

他们这样做是因为它没有得到完全支持。这很像在测试版中拥有该代码。最终他们将添加对边界半径的支持。

当您查看线性渐变时，它会更加明显。

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

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

于 2010-05-28T17:04:42.027 回答
2

简单的。专有变体-moz在写入 CSS3 推荐之前就-webkit已经存在。他们有自己的实现，但不知道这些是否符合 W3C 的最终建议。因此，他们当时也没有使用现在的官方名称，以免以后破坏。border-radius

于 2010-05-28T17:07:40.660 回答
2

请注意，从 2010-09-14开始，-moz 前缀已从border-radius 中删除。这意味着 Firefox 4 将支持无前缀的边界半径。

于 2010-09-15T21:33:48.827 回答