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

【问题标题】：Why do browsers create vendor prefixes for CSS properties?为什么浏览器会为 CSS 属性创建供应商前缀？
【发布时间】：2011-12-29 05:33:42
【问题描述】：

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

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

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

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

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

【问题讨论】：

“是不是因为每个平台都认为‘我们很酷，我们会想出一个更好的方法来做圆角？’”准确地说。

标签： css vendor-prefix

【解决方案1】：

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

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

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

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

让我们进一步说，微软作为一个实验决定实施建议的网格。目前，微软无法确保规格不会改变。因此，改为在向其 CSS 添加网格时，它添加了 -ms-grid。

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

Source.

【讨论】：

同意。新想法需要一些时间才能在互联网世界中得到认可，因此您最终可以获得各种有趣的属性。有些想法从未被批准，而另一些则仅由少数供应商实施。
还想补充一点，虽然一些 CSS 规范现在已经完成，但我们仍将它们用于旧版浏览器支持。

【解决方案2】：

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

正如this glossary 中提到的，关于 Mozilla 在 2016 年 5 月 3 日对供应商前缀的看法，

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

【讨论】：

对供应商前缀的需求并没有真正改变，因为 W3C 在发布 CR 规范方面的速度仍然没有比以往任何时候都快。除此之外，您的示例并没有真正说明与引用中的声明相关的任何内容：您只需要编写标准属性而不是它+今天给定属性的前缀属性并不是由浏览器供应商带来的'不再使用前缀'，而是由 W3C 标准化属性。在几乎所有情况下，如果浏览器支持前缀，它也已经拥有标准属性。