我如何才能知道什么时候使用前缀-webkit-,-moz-,-ms-,-o-在CSS属性?我在一些属性中看到了很多"不一致",在程序员只放置的一些属性中-moz-,在另一个属性中放入了全部4.这是否有原因?
hun*_*tar 10
要了解要使用的前缀取决于您要支持的浏览器.找到哪些浏览器版本需要前缀的好地方是caniuse.com.
这种变化是由于其他开发人员决定支持的浏览器.如果您看到更多前缀,那么该网站的开发人员(网站所有者)已决定对旧版浏览器提供更高/更深层次的支持.较少的前缀将支持更少的浏览器.至于为什么?可能有很多原因可能是目标受众和功能要求(Web API).
你可以去手动路线,但很多开发人员会使用像Autoprefixer这样的工具或像SASS或LESS这样的CSS预处理器.这些工具为您提供了定义要使用的前缀的不同方法.
使用AutoPrefixer之类的东西,可以选择列出您想要支持的浏览器,并根据非前缀版本确定支持这些浏览器所需的前缀等.
使用像SASS或LESS这样的CSS预处理器,您可以创建一个mixin(基本上是一个函数),它将添加您定义的前缀.
我应用一个简单的经验法则:永远不要放置供应商前缀(让用户更新他们的浏览器,并避免非官方/尚未最终确定的CSS规则).
如果您仍想知道哪些前缀是"必需"(或"值得担心"),请参阅http://shouldiprefix.com/.
最后,CSS预处理器可以处理这些,但是添加到开发和发布堆栈通常是一种无用的痛苦(除非您使用其他供应商前缀的东西,或者如果您必须处理公司内部网中的旧浏览器).
很棒的问题。
许多程序员使用CanIUse来确定他们想要支持的所有浏览器是否都支持特定的 CSS 属性。如果他们希望支持的所有浏览器未完全支持它,则程序员应使用供应商前缀(即 -webkit-)。
示例场景
假设程序员想要使用 Transform 属性 ( CanIUse#Transform )。看看 Android 浏览器 4.4 和 4.4.4 右上角如何出现黄色警告?将鼠标悬停在它们上方,注意到上面写着“支持 -webkit”吗?正是如此。当您添加 -webkit- 供应商前缀时。
我不同意你必须将它们全部添加(尽管,这确实没有什么坏处)。如果您在使用更新的 CSS 属性之前做一些研究,您将拥有更干净的 CSS/SASS/LESS/等,同时支持您想要的所有浏览器。:P
我确实认为有一些很棒的工具可以自动执行此操作。异形提到了一些。
祝您的 CSS 事业好运。
这些不同的属性称为“供应商前缀”:
-moz-= 用于 Mozilla Firefox
-ms-= 用于 Microsoft Internet Explorer
-o-= 用于 Opera
-webkit-= 用于 Google Chrome 和 Apple Safari 浏览器。
使用您正在应用的 CSS 的所有供应商前缀始终是一个好方法,以便解决您正在开发的网页的浏览器兼容性问题。
然而,像 LESS 这样的 CSS 预处理器可以处理这个事情,如果你碰巧使用它们的话。我个人使用 LESS 来处理所有这些供应商前缀的东西,它非常简单。如果我不使用预处理器,我仍然会考虑编写供应商前缀 css 以及默认属性名称。
提前解决兼容性问题总是一件好事,而不是遇到一些问题然后再修复它们。
尝试使用供应商前缀工具,例如: https: //github.com/less/less-plugin-autoprefix