CSS供应商前缀的介绍

关于CSS供应商前缀、自动前缀的概述，以及为什么它们在未来没有什么意义

供应商前缀是浏览器用来让我们这些CSS开发者访问尚未被认为是稳定的新功能的一种方式。

在继续之前，请记住，这种方法的流行程度正在下降，而倾向于使用实验性标志，这必须在用户的浏览器中明确启用。

为什么呢？因为开发者不是把供应商前缀作为预览功能的一种方式，而是把它们运到生产中去--CSS工作组认为这是有害的。

主要是因为一旦你添加了一个标志，并且开发者开始在生产中使用它，如果浏览器意识到有些东西必须改变，他们就会处于不利地位。有了标志，除非你能推动你的所有访问者在他们的浏览器中启用该标志，否则你就不能发布一个功能（只是开玩笑，不要尝试）。

这就是说，让我们看看什么是供应商前缀。

我特别记得他们在过去与CSS过渡的工作。你必须这样做，而不是仅仅使用transition 属性。

.myClass {
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-ms-transition: all 1s linear;
	-o-transition: all 1s linear;
	transition: all 1s linear;
}

现在你只需使用

.myClass {
	transition: all 1s linear;
}

因为该属性现在已经被所有的现代浏览器所支持。

使用的前缀是。

• -webkit- (Chrome, Safari, iOS Safari / iOS WebView, Android)
• -moz- (Firefox)
• -ms- (Edge, Internet Explorer)
• -o- (Opera, Opera Mini)

由于Opera和Edge是基于Chromium的，-o- 和-ms- ，可能很快就会过时了。但正如我们所说的，供应商的前缀作为一个整体也在逐渐消失。

编写前缀是困难的，主要是因为不确定性。你是否真的需要一个属性的前缀？一些在线资源也已经过时了，这使得它更难做对。 像Autoprefixer这样的项目可以将整个过程自动化，而不需要我们去寻找是否还需要一个前缀，或者该功能现在已经稳定，应该放弃前缀。它使用来自caniuse.com的数据，这是一个非常好的与浏览器支持有关的参考网站。

如果你使用React或Vue，像create-react-app 和Vue CLI这样的项目，这两种开始构建应用程序的常见方式，都是开箱即用的autoprefixer ，所以你甚至不用担心这个问题。