为什么 mozilla 和 webkit 在 CSS3 规则前添加 -moz- 和 -webkit- ？

发布于 2024-09-03 17:17:24 字数 854 浏览 6 评论 0原文

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

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

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

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

原文

CSS3 rules bring lots of interesting features.

Take border-radius, for example. The standard says that if you write this rule:

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

I should get a 5px border radius.

But neither mozilla nor webkit implement this. However, they implement the same thing, with the same parameters, with a different name (-moz-border-radius and -webkit-border-radius, respectively).

In order to satisfy as many browsers as possible, you end up with this:

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

I can see two obvious disadvantages:

Copy-paste code. This has obvious risks that I will not discuss here.
The W3C CSS validator will not validate these rules.

At the same time, I don't see any obvious advantages.

I believe that the people behind mozilla and webkit are more intelligent than myself. There must be some good reasons to have things structured this way. It's just that I can't see them.

So, I must ask you people: why is this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吹梦到西洲 2024-09-10 17:17:24

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

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

回复收藏 0 原文

jJeQQOZ5 2024-09-10 17:17:24

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

当你观察线性渐变时，这一点更加明显。

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

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

They do this because its not fully supported. It much like having that code in beta. Eventually they will add support for border-radius.

It more obvious when you look at the linear gradients.

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

Notice they don't use the same syntax. When they finally agree on a standard then both with add support for linear-gradient and use the correct syntax.

回复收藏 0 原文