CSS供应商"前缀

由詹妮弗Kyrnin

更新2018年3月11日

CSS供应商的前缀，有时也称为CSS浏览器前缀，是浏览器厂商在所有浏览器都完全支持这些特性之前添加对新CSS特性的支持的一种方式。在某种测试和实验期间，浏览器制造商将决定如何实现这些新的CSS特性。随着几年前CSS3的兴起，这些前缀变得非常流行。

当CCS3第一次被引入时，许多激动的属性在不同的时间开始攻击不同的浏览器。例如，webkit驱动的浏览器(Safari和Chrome)是第一个引入一些动画风格的属性，比如转换和转换。通过使用供应商的前缀属性，web设计人员能够在他们的工作中使用这些新特性，并且可以在支持他们的浏览器上看到这些特性，而不是等待其他所有浏览器制造商赶上来!

因此，从前端web开发人员的角度来看，浏览器前缀被用于在站点上添加新的CSS特性，同时也让用户知道浏览器将支持这些样式。当不同的浏览器厂商以略微不同的方式或使用不同的语法实现属性时，这一点特别有用。

你可以使用的CSS浏览器前缀(每一个都是针对不同的浏览器):

Android:webkit -

铬:webkit -

Firefox:-moz -

Internet Explorer:- ms -

iOS:webkit -

歌剧:- o -

Safari:webkit -

在大多数情况下，要使用一个全新的CSS样式属性，可以使用标准的CSS属性并为每个浏览器添加前缀。前缀的版本总是第一个(按您喜欢的顺序)，而普通的CSS属性将会是最后一个。

例如，如果您想在文档中添加CSS3转换，您将使用如下所示的转换属性:

-webkit-transition:所有4 s缓解;

-moz-transition:所有4 s缓解;

-ms-transition:所有4 s缓解;

-o-transition:所有4 s缓解;

过渡:所有4 s缓解;

注意:记住，某些浏览器对某些属性的语法不同于其他浏览器，所以不要假设一个属性的浏览器前缀版本与标准属性完全相同。例如，要创建一个CSS渐变，可以使用线性渐变属性。Firefox、Opera和现代版本的Chrome和Safari在使用该属性时使用了相应的前缀，而早期版本的Chrome和Safari则使用了前缀属性。-webkit-梯度同样，Firefox使用的值与标准的不同。

您总是使用正常的、非前缀的CSS属性来结束声明的原因是，当浏览器支持规则时，它将使用这个规则。记住CSS是如何读取的。后来的规则优先于早些时候的特异性是相同的,所以浏览器阅读厂商版本的规则和使用,如果它不支持正常,但一旦它,它将覆盖供应商版本与实际的CSS规则。

供应商前缀不是黑客。

当供应商的前缀首次被引入时，许多web专业人士都想知道，他们是黑客还是回到了网站代码支持不同浏览器的黑暗时代(记住，“这个站点是IE中最好的视图”)。CSS供应商前缀不是黑客，你应该对在工作中使用它们毫无保留。

CSS hack利用另一个元素或属性的实现中的缺陷来获得另一个属性来正确工作。例如，box模型破解了语音家庭属性解析的缺陷，或者浏览器如何解析反斜杠(\)。但是，这些技巧被用来解决Internet Explorer 5.5如何处理框模型和Netscape如何解释它的问题，与语音家庭风格无关。

值得庆幸的是，这两种过时的浏览器是我们现在不关心的问题(对于那些在这段时间还没有出现在业界的人来说，谢天谢地吧!)他们是黑暗和混乱的时代，的确!

供应商前缀不是hack，因为它允许规范为如何实现属性设置规则，同时允许浏览器制造商以不同的方式实现属性，而不会破坏其他所有内容。此外，这些前缀还使用CSS属性，这些属性最终将成为规范的一部分。我们只是添加一些代码，以便尽早访问属性。这也是为什么用常规的非前缀属性结束CSS规则的另一个原因。这样，一旦实现了完整的浏览器支持，就可以删除预修正版本。

想知道浏览器对某个特性的支持是什么吗?CanIUse.com网站是收集这些信息和让你知道哪些浏览器以及哪些浏览器的版本的绝佳资源。