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-的每个浏览器都以自己的方式实现。这不仅使开发人员，而且对于浏览器创建者来说也很容易，因为微软和歌剧受损的情况开始支持-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的longhand属性在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最初使用旧名称实现longhands的原因是因为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-
Firefox：-moz-
Internet Explorer：-ms-
iOS：-webkit-
Opera：-o-
Safari：-webkit -

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

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.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,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.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%); /* IE10+ */
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 ); /* IE6-9 */

你可以看到参数是不同的，我记得的另一个例子是当我使用flex元素时的内容对齐：

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

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

供应商有自己不同的实施方式，因此无法推广。

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

2 个答案: