css - 为什么浏览器会为 CSS 属性创建供应商前缀？

Question

也许这是一个显而易见的答案，但是

为什么浏览器会决定创建自己的供应商前缀border-radius等？

我的意思是：为什么我必须输入：

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

是不是因为每个平台都认为“我们很酷，我们会想出更好的方法来做圆角？” 为一行键入三行似乎完全且莫名其妙地多余。

Answer 1

这是因为这些功能是在规范到达最终发布阶段之前由供应商实现的。

供应商前缀确保不会与更改功能等发生冲突。

最初，供应商前缀的目的是允许浏览器制造商开始支持实验性 CSS 声明。

假设一个 W3C 工作组正在讨论一个网格声明（顺便说一句，这不是一个坏主意）。让我们进一步说，有些人创建了一个规范草案，但其他人不同意某些细节。我们知道，这个过程可能需要很长时间。

让我们进一步说，微软作为一个实验决定实施提议的网格。目前，Microsoft 无法确定该规范不会更改。因此，它没有在其 CSS 中添加网格，而是添加了 -ms-grid。

供应商前缀表示“这是微软对正在进行的提案的解释”。因此，如果网格的最终定义不同，微软可以添加一个新的 CSS 属性网格，而不会破坏依赖于 -ms-grid 的页面

来源。

Answer 2

由于这篇文章很老，重要的是要提到现在大多数供应商都明白这些前缀只是创建了不必要的重复代码，而您需要指定 3 种不同的 CSS 规则以使一种效果在所有浏览器中工作的情况是不需要的。

正如2016 年 5 月 3 日关于 Mozilla 对供应商前缀的看法的词汇表中所述，

浏览器供应商现在正试图摆脱实验性功能的供应商前缀。他们注意到，Web 开发人员在生产网站上使用它们，污染了全球空间，并使弱者更难表现良好。

例如，就在几年前，要在一个盒子上设置一个圆角，你必须这样写：

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;

但是现在浏览器已经完全支持这个功能，你真的只需要标准化版本：

border-radius: 10px 5px;