为什么 CSS 属性对 Chrome、FF、Opera 有不同的名称？答案

【问题标题】：Why CSS properties do have different names for Chrome, FF, Opera?为什么 CSS 属性对 Chrome、FF、Opera 有不同的名称？
【发布时间】：2011-02-28 20:03:34
【问题描述】：

我想要一个名为“shadow”的 div 下方的阴影：

#shadow { box-shadow: 1px 1px 1px #000 };

完成了吗？

一点也不。它只在一个浏览器中工作。猜猜是哪一个。

对于 FF/Chrome 我必须添加不太直观：

-moz-box-shadow: 1px 1px 1px #000;
-webkit-box-shadow: 1px 1px 1px #000;

现在一切正常。该方案适用于许多 CSS 属性。为什么？

幸运的是没有 -webkit-border、moz-font 或 -ie-backgroundcolor。

附言。是的，对 IE 只字不提。将此称为浏览器就像将轮椅与摩德纳汽车进行比较。

PS 2. 为什么我的帖子下方的谷歌浏览器标签旁边有一个标志？或者为什么没有 Opera 和 FF 的标志？

【问题讨论】：

关于 PS2：Chrome 标签有一个标志，因为 Google 向 Stackoverflow 支付费用来显示一个。这是一种微妙的广告形式；）。

标签： css firefox google-chrome opera w3c

【解决方案1】：

这是因为浏览器不希望彼此发生冲突。除此之外，目前还没有真正的 box-shadow 的“规范”，所以几个浏览器都有自己的实现。

这种方法允许任何供应商特定的扩展共存与任何未来（或当前）的 CSS 不引起冲突的属性因为，根据 W3C 规范，一个 CSS 属性名称永远不会以破折号或下划线：

来源：http://reference.sitepoint.com/css/vendorspecific

【讨论】：

【解决方案2】：

这是浏览器在 CSS 规范完全批准之前发布功能的一种方式。

例如，看看 CSS3 渐变。 -moz- 与 -webkit- 完全不同。

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.15, rgb(145,4,88)),
    color-stop(0.58, rgb(174,30,115)),
    color-stop(0.79, rgb(209,57,150))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(145,4,88) 15%,
    rgb(174,30,115) 58%,
    rgb(209,57,150) 79%
);

这可能会引起您的兴趣：http://www.alistapart.com/articles/prefix-or-posthack/

所以下次你找到自己的时候抱怨声明相同事情四次，每次一次浏览器，记住痛苦是暂时的。有点像疫苗——现在打针很痛，真的，但是相比之下真的没那么糟糕它预防的疾病。而在在这种情况下，您正在接种疫苗针对多年的不良案例解析器黑客攻击和浏览器嗅探。我们经历了那漫长的瘟疫已经有一次了。前缀将，如果使用正确地，避免再次爆发很长一段时间。

注意：最好包含不带前缀的版本，以便在完全采用该属性时继续站点功能。

【讨论】：

AListApart 文章对于任何愿意了解为什么属性前缀是改进 Web 标准开发的一种方式的人来说都是必读的。

【解决方案3】：

基于未完成规范实现的属性被赋予供应商前缀。如果给定的供应商认为他们的实施还没有完成，即使规范已经完成，也会发生同样的事情。

【讨论】：

【解决方案4】：

浏览器的功能领先于它们应该遵循的标准。它们允许您在标准发布之前的过渡期间访问这些功能，然后它们遵循已发布的标准并提供与看起来很时髦的“webkit...”格式的向后兼容性。

【讨论】：

它甚至是必需的，有点。仅当供应商有两个先前的实施时，才能获得推荐状态。没有实施，没有标准。

【解决方案5】：

正如其他人已经回答的那样，这是因为他们正在实现规范尚未完成的功能，或者他们的实现尚未完成的功能。

这是故意的行为； CSS 规范指定这是他们在这种情况下应该如何做的事情。这条规则的原因如下：

为了确保不同的浏览器以不同的方式实现该功能（由于规范中的更改或不一致），这些差异都可以合并到同一个样式表中。
例如：-moz-border-radius 的早期版本与-webkit-border-radius 的工作方式完全不同；它们之间存在显着的语法差异，因此如果它们都只是 border-radius，您将无法同时支持它们。
在规范完成后简化过渡。
如果您确实使用带有供应商前缀的功能，请始终将该功能的非前缀版本放在最后，放在其他版本之后。这样，最近升级以正确支持它的浏览器将选择正确的版本，而不是被过时的前缀版本覆盖。
确保网络开发人员知道他们使用的功能不一定适合黄金时段使用。
这很重要：您应该清楚，使用带有供应商前缀的功能意味着您正在使用浏览器制造商和规范编写者认为尚未准备好的功能。你需要知道这一点。不要让它阻止你使用有用的东西，但要注意下一个版本可能会改变。

【讨论】：