什么是 CSS 前缀，我为什么要关心它？

直接来自源代码:

“浏览器供应商有时会为实验性或非标准 CSS 属性添加前缀，这样开发者就可以进行实验，但在标准化过程中，浏览器行为的改变不会破坏代码。开发者应该等到浏览器行为标准化之后再包含无前缀的属性。”

作为一名 Web 开发者，如果使用了带前缀的 CSS 属性，而这些属性后来被去掉了前缀，你的网站用户将会受到影响——特别是如果带前缀和无前缀的语法之间发生了改变。

你可以采取一些措施来维护一个无故障的 Web。首先，检查你的样式表中是否有过时的渐变语法，并使用无前缀的现代等效语法进行更新。但是首先，让我们仔细看看这个问题。

什么是 CSS 渐变？

CSS 渐变是一种 CSS <image> 函数（以属性值的形式表达），它使开发者能够为块级元素的背景添加颜色变化，而不仅仅是纯色。 关于渐变的 MDN 文档 概述了各种渐变类型以及如何使用它们。与往常一样，CSS Tricks 也有关于 CSS3 渐变的顶级 覆盖范围。

从 Firefox 中删除（然后不删除）带前缀的渐变

在 Bug 1176496 中，我们试图删除对旧的 -moz- 前缀线性渐变和径向渐变的支持。不幸的是，我们很快就 意识到，这样做会破坏足够多的网站的 Web（[1]，[2]，[3]，[4]，[5]，[6]），以至于我们不得不重新添加支持（暂时）。

罪与语法

由于规范在 -moz- 前缀实现和现代无前缀版本之间发生了变化，所以不能仅仅去掉前缀就得到有效的渐变。

以下是一个关于语法如何改变的简单示例（对于线性渐变）

/* The old syntax, deprecated and prefixed, for old browsers */
background: -prefix-linear-gradient(top, blue, white); 
/* The new syntax needed by standard-compliant browsers (Opera 12.1,
   IE 10, Firefox 16, Chrome 26, Safari 6.1), without prefix */
background: linear-gradient(to bottom, blue, white);

简而言之，添加了 to 和 at 关键字，删除了 contain 和 cover 关键字，并且角度坐标系已更改为与平台的其他部分更一致。

当 IE10 发布了对无前缀的新的渐变的支持时，IEBlog 发布了一篇很棒的博文，阐明了带前缀（旧）语法和新语法之间的区别；查看该博文以获取更深入的覆盖范围。 css-tricks.com 上关于 CSS3 渐变的文章 也对 CSS 渐变的历史及其语法进行了很好的概述（参见“Browser Support/Prefixes”部分中的“Tweener”和“New”）。

好的，那我该怎么做？

你可以开始检查你的样式表中是否有过时的渐变语法，并确保使用无前缀的现代等效语法。

以下是一些可以帮助你维护现代、最新、无前缀 CSS 的工具和库

如果你已经在使用 PostCSS 插件 Autoprefixer，那么你就不需要做任何操作。如果你还没有使用它，可以考虑将它添加到你的工具箱中。如果你更喜欢客户端解决方案，Lea Verou 的 prefix-free.js 是另一个不错的选择。

此外，Web 应用程序 Colorzilla 允许你输入旧的 CSS 渐变语法，以便快速转换为现代无前缀的转换。

木村正聪添加了一个首选项，可以用来关闭对旧的 -moz- 前缀渐变的支持，使开发者可以轻松地进行视觉测试以查找损坏的渐变。在 Nightly 中将 layout.css.prefixes.gradients 设置为 false（从 about:config 中）。此首选项应该在 Firefox 42 中发布。

现代化你的 CSS

只要你在编辑你的样式表，现在就是检查其他样式表是否整体新鲜的好时机。Flexbox 是一个特别麻烦且需要修复的领域，但 好的资源 存在以减轻痛苦。CSS border-image 也是一个在带前缀和无前缀版本之间发生 更改 的领域。

感谢你帮助构建和维护一个有效的 Web。