什么是CSS供应商或浏览器前缀？

Week 8, continued (六月 2025)

Week 8, continued (六月 2025)
Anonim

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

当CCS3首次被引入时，许多激动的属性在不同的时间开始出现在不同的浏览器中。例如，Webkit驱动的浏览器（Safari和Chrome）是第一个引入一些动画风格属性（如转换和转换）的浏览器。通过使用供应商前缀属性，网页设计师能够在他们的工作中使用这些新功能，并立即在支持它们的浏览器上看到它们，而不必等待所有其他浏览器制造商赶上！

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

您可以使用的CSS浏览器前缀（每个前缀特定于不同的浏览器）是：

  • 安卓：

    -webkit-

  • 铬：

    -webkit-

  • 火狐：

    -moz-

  • IE浏览器：

    -女士-

  • iOS版：

    -webkit-

  • 歌剧：

    -O-

  • 苹果浏览器：

    -webkit-

在大多数情况下，要使用全新的CSS样式属性，请使用标准CSS属性并为每个浏览器添加前缀。前缀版本将始终排在第一位（以您喜欢的任何顺序排列），而普通的CSS属性将是最后一位。例如，如果要向文档添加CSS3过渡，则可以使用

过渡

财产如下图所示：

-webkit- 过渡：全部4s轻松; -moz- 过渡：全部4s轻松; -女士- 过渡：全部4s轻松; -O- 过渡：全部4s轻松;过渡：全部4s轻松;

注意： 请记住，某些浏览器对某些属性的语法与其他浏览器的语法不同，因此不要假设属性的浏览器前缀版本与标准属性完全相同。例如，要创建CSS渐变，请使用

线性梯度

属性。 Firefox，Opera和现代版Chrome和Safari使用具有相应前缀的属性，而早期版本的Chrome和Safari使用前缀属性

-webkit梯度

。此外，Firefox使用的值与标准值不同。

您始终使用CSS属性的正常，无前缀版本结束声明的原因是，当浏览器支持该规则时，它将使用该规则。记住如何读取CSS。如果特异性相同，则后面的规则优先于先前的规则，因此浏览器将读取规则的供应商版本并使用该规则，如果它不支持正常规则，但一旦规则，它将覆盖供应商版本实际的CSS规则。

供应商前缀不是黑客

当首次引入供应商前缀时，许多网络专业人员想知道他们是否是一个黑客或转回到分支网站代码以支持不同浏览器的黑暗时代（记住那些“ 这个网站最好在IE浏览器中查看 “消息”。然而，CSS供应商的前缀不是黑客，你应该对在工作中使用它们没有任何保留。

CSS hack利用另一个元素或属性的实现中的缺陷，以使另一个属性正常工作。例如，盒子模型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-top-right-radius：5px;-webkit-border-bottom-right-radius：10px;-webkit-border-bottom-left-radius：5px;border-radius：10px 5px;

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

border-radius：10px 5px;

自5.0版以来，Chrome支持CSS3属性，Firefox在4.0版中添加了它，Safari在5.0中添加了它，在10.5中添加了Opera，在4.0中添加了iOS，在2.1中添加了Android。甚至Internet Explorer 9也支持它没有前缀（IE 8及更低版本不支持带前缀或不带前缀）。

请记住，浏览器总是会发生变化，除非您计划构建比最现代化方法落后多年的网页，否则将需要支持旧版浏览器的创新方法。最后，编写浏览器前缀比查找和利用很可能在未来版本中修复的错误要容易得多，这需要您找到另一个要利用的错误，等等。

编辑推荐