为什么使用特定的供应商前缀而不是代表所有浏览器的前缀？ [关闭]

Question

据我所知，使用供应商前缀的唯一原因是浏览器创建者引入它们是为了在新规范完全按照 W3C 实现之前发布它。

但是为什么我们需要为每个浏览器指定一个特定的供应商前缀呢？

如果我们看下面的 CSS，

.box{
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   -o-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}

为什么不能这样写？

.box{
   -vendor-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}

每个单独的浏览器在看到前缀 -vendor- 时，都会以自己的方式实现它。

这不仅使开发人员变得容易，而且对于浏览器创建者来说也很容易，因为微软和Opera 受到威胁的情况开始支持-webkit-，因为开发人员懒得使用-ms- 和-o- 永远不会上升。如果-vendor- 是这种情况，它适用于所有浏览器。

解释是什么？

Answer 1

据我所知，使用供应商前缀的唯一原因是它们是由浏览器创建者引入的，以在根据 W3C 完全实现之前发布新规范

没有； 根据 W3C，供应商前缀的目的是让供应商提供他们自己的实验性、专有或其他非标准功能的实现。该前缀旨在标识负责此实现的特定供应商。来自CSS2.1 spec：

在 CSS 中，标识符可以以“-”（破折号）或“_”（下划线）开头。以 -' 或 '_' 开头的关键字和属性名称保留用于特定于供应商的扩展。此类特定于供应商的扩展应具有以下格式之一：

'-' + vendor identifier + '-' + meaningful name
'_' + vendor identifier + '-' + meaningful name

例如，如果 XYZ 组织添加了一个属性来描述显示器东侧边框的颜色，他们可能会称之为 -xyz-border-east-color。

事实上，规范甚至没有具体提及“现有或待定标准的实验性实现”，尽管这只是属于“非标准”的范畴。

此外，因为供应商可以随心所欲地实现他们自己的属性，所以您不能保证每个供应商都会就属性语法这样简单的事情达成一致。例如，border-radius 的速记属性在 Firefox 中如下所示：

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomleft

这与 WebKit 有很大不同：

-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius

您可以猜到，WebKit 形式是最终规范的形式，当 Mozilla 开始在 Firefox 4 中将 border-radius 推广为标准时，他们必须遵循该规范。但关键在于：Mozilla 的原因最初使用旧名称实现的速记是因为once upon a time, those were the names that were used by the spec！所以重命名属性的不仅仅是 WebKit，还有 CSSWG，这最终导致了实现之间的不兼容。

为所有实验性实现设置一个前缀并没有什么意义，因为这样您就可以让每个人都实现不带前缀的属性，而不必在以后不必要地复制它或“取消前缀”它。即便如此，您仍然会遇到上述不断发展的标准和实施不兼容的问题。

WebKit 前缀的问题仅仅源于供应商和作者对前缀的广泛滥用（主要是作者选择仅使用 -webkit- 而忽略其他前缀，这要归功于 Chrome 和诸如此类的流行）。浏览器供应商已经找到了一种更好的方法来处理这个问题，这允许他们abandon prefixes altogether，例如在他们的 UI 中将实验属性隐藏在兼容性标志后面。

请注意，前缀仍用于其最初的预期用途；例如，Microsoft 使用-ms- 实现各种 WinRT 组件的 CSS，Mozilla 使用 -moz- 实现 XUL 的 CSS，用于实现 Firefox 的 UI。

Answer 2

供应商前缀的实现方式不同。其中一些采用不同的参数或以不同的顺序，例如梯度。在这种情况下，您将无法编写通用的 -vendor-gradient，因为它们不采用相同的参数。

在您拥有的供应商前缀列表中，

• Android：-webkit-
• Chrome：-webkit-
• 火狐：-moz-
• Internet Explorer：-ms-
• iOS：-webkit-
• 歌剧：-o-
• Safari：-webkit-

我使用了一个渐变生成器，输出是针对某些特定渐变的

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207CCA 51%, #7DB9E8 100%); /* Firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1E5799), color-stop(50%, #2989D8), color-stop(51%, #207CCA), color-stop(100%, #7DB9E8)); /* Chrome and Safari4+ */
background: -webkit-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207CCA 51%, #7DB9E8 100%); /* Chrome 10+ and Safari 5.1+ */
background: -o-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207CCA 51%, #7DB9E8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207CCA 51%, #7DB9E8 100%); /* Internet Explorer 10+ */
background: linear-gradient(to bottom,  #1E5799 0%, #2989D8 50%, #207CCA 51%, #7DB9E8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799', endColorstr='#7DB9E8', GradientType=0 ); /* Internet Explorer 6-9 */

您可以看到参数不同。我记得的另一个例子是我使用 flex 元素时的 content justify：

justify-content: space-between;
-moz-justify-content: space-between;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;

在那里你可以看到，对于-ms- vendor 参数和属性是不同的，以达到相同的结果。

厂商有自己不同的实现方式，不能一概而论。