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

Question

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

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

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

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

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

Answer 1

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

供应商前缀确保不与不断变化的功能等发生冲突。

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

假设 W3C 工作组正在讨论网格声明（其中，
顺便说一句，这并不是一个坏主意）。我们还要再说一下
有些人制定了规范草案，但其他人不同意
一些细节。众所周知，这个过程可能需要很长时间。

我们还可以说，微软作为一项实验决定
实施拟议的网格。此时此刻，微软无法
确保规格不会改变。因此，相反
在将网格添加到其 CSS 中时，它添加了 -ms-grid。

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

源的页面。

Answer 2

由于这篇文章很旧，值得一提的是，现在大多数供应商确实明白这些前缀只是创建不必要的重复代码，以及您需要指定 3 种不同的 CSS 规则才能在所有情况下获得一种效果的情况浏览器是一个不需要的浏览器。

正如 本词汇表中提到的，Mozilla 5 月 3 日对供应商前缀的看法， 2016年，

浏览器供应商现在正在尝试摆脱实验性的供应商前缀
特征。他们注意到 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;