在新的CSS功能中添加前缀的原因是什么？

浏览器是否有理由为CSS新功能添加前缀，而不是让网站站长使用非前缀版本？

例如，背景渐变的示例代码如下：

#arbitrary-stops {
  /* fallback DIY*/

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* IE 10 */
  background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Opera 11.10+ */
  background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}

强制网站管理员四次复制粘贴相同的代码以得到相同的结果有什么意义？

注意：经常被引用的原因之一是，当浏览器无法正确实现规范或规范不明确时，前缀样式应为临时样式。

IMO，这是胡说八道：

• 如果浏览器引擎未正确实现规范，则浏览器将不兼容，无论它不是以非前缀形式实现还是以前缀形式实现。
• 如果规范不是确定性的，则在以前的实现中使用相同的名称可能会很重要。例如，如果CSS2具有linear-gradient，但CSS3打算扩展linear-gradient其他功能，则可以通过-css3-<style>区分工作CSS2和实验CSS3 来临时为新的草稿实现做临时前缀。实际上，CSS2没有linear-gradient其他CSS3新颖性。

我还将理解不同的浏览器是否具有不同的实现格式：例如，假设Firefox需要用于文本阴影<weight-of-shadow distance-x distance-y color>，而Chrome需要<distance-x distance-y weight-of-shadow color>。但实际上并非如此。到目前为止，至少我使用过的CSS3的所有新功能都具有相同的格式。

根据此W3C说明：

为了避免与将来的CSS功能冲突，CSS2.1规范为CSS的专有和实验性扩展保留了前缀语法。

在W3C流程中的规范到达候选推荐阶段之前，CSS功能的所有实现都被视为试验性的。CSS工作组建议实现使用此类功能的供应商前缀语法，包括W3C工作草案中的功能。这样可以避免与草案的将来更改不兼容。

您可以在此处和此处跟踪CSS的状态。

我也将了解不同的浏览器是否具有不同的实现格式... [b]但实际上并非如此；到目前为止，至少我使用过的CSS3的所有新功能都具有相同的格式。

这告诉我您玩此游戏的时间不够长。

问题在于Web浏览器永远不会以相同的方式实现新功能。常见的情况是，浏览器实现了尚未标准化的功能，结果是，在不同的浏览器上，所有操作都不同。

不仅如此，新功能经常出现问题（我们将避免按名称调用IE），因此，即使各种元素的语法相同，结果也有所不同。

这使那些想使用新功能的开发人员感到头疼。完成样式表的编写后，他们很快就会意识到，出于无法解释的原因，它在不同的浏览器上呈现的方式有所不同。

在出现前缀之前，开发人员通常被迫利用CSS解析器中的错误来依靠浏览器之间可检测到的差异。这导致了这样的可憎：

padding: 10px;
width: 200px;
w\idth: 180px;
height: 200px;
heigh\t: 180px;

这类黑客行为是开发人员尝试使用他们能找到的任何古怪方法为每个浏览器自定义样式表的结果。

通过标准化前缀，它使开发人员可以使用在不同浏览器中不稳定的功能。在-moz-和-webkit-前缀十分清楚的是，作者试图以提供只能在某些Web浏览器应用的样式。

一旦功能变得稳定并且浏览器开始执行相同的操作，就可以删除前缀并声明一次功能。

我认为认识到前缀并不意味着您必须为每个浏览器声明一次样式很重要。前缀意味着，只要您发现Web浏览器不符合标准，就必须声明其他样式。例如，代替上面的代码，您应该以：

 background: linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

如果您突然意识到Microsoft无法正确计算线性梯度，则可以添加前缀来解决IE上的问题：

 /* Friggin IE */
 background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
 background: linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

突然，您的页面在每个浏览器中看起来都一样，尽管其中一个浏览器的功能有所不同。

您会发现本文在A List Apart中已对此进行了非常全面的介绍。

如果浏览器引擎未正确实现规范，则浏览器将不兼容，无论它不是以非前缀形式实现还是以前缀形式实现。

不同的是，浏览器不会破坏兼容性，当它没有成为标准。如果浏览器的行为与规范不同，则他们在更改旧代码时不会破坏旧代码-因为它以新名称列出。