5

据我所知，使用供应商前缀的唯一原因是它们是由浏览器创建者引入的，以在根据 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-它适用于每个浏览器。

解释是什么？

4

2 回答 2

13

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

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

在 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 开始border-radius在 Firefox 4 中升级为标准时，必须遵循该规范。但这里有一个关键点：Mozilla 最初使用旧名称是因为曾几何时，那些是规范使用的名称！因此，不仅仅是 WebKit 重命名了属性，CSSWG 也是如此，这最终导致了实现之间的不兼容。

为所有实验性实现使用单个前缀并没有多大意义，因为那样您还不如让每个人都实现没有前缀的属性，而不必在以后不必要地复制它或“取消前缀”它。即便如此，您仍然会遇到上述不断发展的标准和实施不兼容的问题。

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

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

于 2014-08-21T16:56:16.410 回答
3

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

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

  • 安卓：-webkit-
  • 铬：-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- 供应商参数和属性是不同的，以实现相同的结果。

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

于 2014-08-21T16:49:46.703 回答