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

Question

也许这是一个明显的答案,但是

为什么地球上会浏览器决定创建自己的供应商前缀border-radius之类的？

我的意思是:为什么我要打字:

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

是因为每个平台都认为"我们很酷,我们会想出一个更好的方法来做圆角吗？" 为一个输入三行似乎完全无法解释多余.

Answer 1

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

供应商前缀确保不会出现功能变化等冲突.

最初,供应商前缀的重点是允许浏览器制造商开始支持实验性CSS声明.

假设一个W3C工作组正在讨论网格声明(顺便说一下,这不是一个坏主意).让我们进一步说有些人创建草案规范,但其他人不同意一些细节.众所周知,这个过程可能需要很长时间.

让我们进一步说微软作为一个实验决定实现建议的网格.此时,微软无法确定规范是否会发生变化.因此,它不添加网格到CSS,而是添加-ms-grid.

供应商前缀类似于"这是Microsoft对正在进行的提案的解释."因此,如果网格的最终定义不同,Microsoft可以添加新的CSS属性网格,而不会破坏依赖于-ms-grid的页面

来源.

Answer 2

2016年更新

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

正如提到这个词汇有关Mozilla的看法上Vendor Prefix上May 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;