CSS供应商前缀

他们是什么以及为什么你应该使用它们

CSS供应商前缀(也称为CSS浏览器前缀)是浏览器制造商在所有浏览器完全支持这些功能之前添加对新CSS功能的支持的一种方式。 这可能会在测试和实验期间完成,浏览器制造商正在确定如何实现这些新的CSS功能。 这些前缀在几年前随着CSS3的兴起而变得非常流行。

当CCS3首次推出时,许多激动人心的特性开始在不同的时间点击不同的浏览器。 例如,webkit驱动的浏览器(Safari和Chrome)是第一批引入一些动画风格的属性,如变换和转换。 通过使用供应商的前缀属性,网页设计人员可以在他们的工作中使用这些新功能,并让他们立即在支持它们的浏览器上看到,而不必等待其他浏览器制造商赶上!

因此,从前端Web开发人员的角度来看,浏览器前缀用于在网站上添加新的CSS功能,同时知道浏览器将支持这些样式。 当不同的浏览器制造商以不同的方式或使用不同的语法来实现属性时,这可能特别有用。

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

在大多数情况下,要使用全新的CSS样式属性,需要使用标准CSS属性并为每个浏览器添加前缀。 前缀的版本总是会优先(以您喜欢的任何顺序排列),而普通的CSS属性会持续到最后。 例如,如果您想向文档添加CSS3转换,则可以使用transition属性,如下所示:

-webkit-转换:所有4s缓解;
-moz-过渡:所有4s缓解;
-ms-过渡:所有4s缓解;
-o-过渡:所有4s缓解;
过渡:所有4s缓解;

注意:请记住,某些浏览器对某些属性的语法与其他浏览器的语法不同,因此不要认为浏览器前缀的属性版本与标准属性完全相同。 例如,要创建CSS渐变 ,请使用线性渐变属性。 Firefox,Opera以及Chrome和Safari的现代版本都使用该属性并使用适当的前缀,而早期版本的Chrome和Safari使用前缀属性-webkit-gradient。 另外,Firefox使用与标准值不同的值。

你总是以CSS属性的正常,非前缀版本结束声明的原因是,当浏览器支持该规则时,它将使用该规则。 记住CSS是如何读取的。 如果特异性相同,则后面的规则优先于先前的规则,因此浏览器将读取规则的供应商版本,并在不支持正常规则的情况下使用该版本,但一旦这样做,它将覆盖供应商版本实际的CSS规则。

供应商前缀不是黑客

当第一次推出供应商前缀时,许多网络专业人员想知道他们是黑客还是转移到黑暗的时代去分支一个网站的代码来支持不同的浏览器(记住那些“ 这个网站最好在IE中查看 ”的消息)。 然而,CSS供应商的前缀并不是黑客,你应该对你在工作中使用它们没有任何保留。

CSS hack利用另一个元素或属性的缺陷实现另一个属性的正常工作。 例如,box模型hack利用了语音族属性解析中的缺陷或浏览器解析反斜杠(\)的方式。 但是这些黑客被用来解决Internet Explorer 5.5处理盒子模型和Netscape如何解释它之间的区别问题,并且与声音家庭风格无关。 值得庆幸的是,这两种过时的浏览器是我们近期无需担忧的浏览器。

供应商前缀不是黑客,因为它允许规范设置如何实现属性的规则,同时允许浏览器制造商以不同的方式实现一个属性而不会破坏其他所有内容。 此外,这些前缀与CSS属性一起工作, 最终将成为规范的一部分 。 我们只是简单地添加一些代码,以便尽早访问该属性。 这是您使用普通的非前缀属性结束CSS规则的另一个原因。 这样,一旦完全支持浏览器,您就可以放弃前缀版本。

想知道浏览器支持哪些功能? CanIUse.com网站是收集这些信息的绝佳资源,并让您了解哪些浏览器以及这些浏览器的哪些版本目前支持某项功能。

供应商前缀烦人但临时

是的,它可能会感到讨厌和重复,必须编写2-5次的属性才能使其在所有浏览器中都能正常工作,但这只是暂时的情况。 例如,就在几年前,为了在一个盒子上设置一个圆角,你必须写下:

-moz-border-radius:10px 5px;
-webkit-border-top-left-radius:10px;
-webkit-border-right-right-radius:5px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:5px;
border-radius:10px 5px;

但是现在浏览器已经完全支持这个功能,你真的只需要标准化版本:

border-radius:10px 5px;

Chrome从5.0版开始支持CSS3属性,Firefox在4.0版中增加了它,Safari在5.0中增加了它,Opera在10.5中,iOS在4.0中,Android在2.1中。 即使Internet Explorer 9也不支持前缀(IE 8和更低版本不支持前缀或前缀)。

请记住,浏览器总是会发生变化,除非您打算构建比现代方法晚数年的网页 ,否则将需要支持旧版浏览器的创意方法。 最后,编写浏览器前缀比找到并利用最有可能在未来版本中修复的错误要容易得多,这要求您找到另一个可以利用的错误等等。