我怎么知道何时使用-webkit-，-moz，-ms-， - o-等？

Question

我如何知道何时在css属性中使用前缀 $dag = mysql_query("SELECT x,x FROM x WHERE user_id = $id AND DAY(datetime)='13' AND MONTH(datetime)='4' ORDER BY TIME(datetime)"); ，-webkit-，-moz-，-ms-？我在一些属性中看到了很多“不一致”，在程序员只放了-o-的某些属性中，在另一个属性中放了全部4.有没有理由呢？

Answer 1

根据您想要支持的浏览器，了解要使用的前缀。找出哪些浏览器版本需要前缀的好地方是caniuse.com。

变化是由于其他开发人员决定支持的浏览器。如果您看到更多前缀，那么该网站的开发人员（网站所有者）已决定对旧版浏览器提供更高/更深层次的支持。较少的前缀将支持更少的浏览器。至于为什么？可能有很多原因可能是目标受众和功能要求（Web API）。

您可以使用手动路线，但很多开发人员会使用Autoprefixer等工具或SASS或LESS等CSS预处理器。这些工具为您提供了定义要使用的前缀的不同方法。

使用 AutoPrefixer 这样的选项可以列出您想要支持的浏览器，并根据非前缀版本确定支持这些浏览器所需的前缀等

使用像 SASS 或 LESS 这样的CSS预处理器，您可以创建一个 mixin （基本上是一个函数）来添加前缀＃39已定义。

Answer 2

我运用一个简单的经验法则：永远不会放置供应商前缀（让用户更新他们的浏览器，避免非官方/尚未最终确定的CSS规则）。

如果您仍想知道哪些前缀是＆＃34;必需＆＃34;请参阅http://shouldiprefix.com/。 （或者＃34;值得担心＆＃34;）。

最后，CSS预处理器可以处理这些问题，但添加到开发和发布堆栈中往往是一种无用的痛苦（除非您使用其他供应商前缀的东西，或者如果您必须处理使用像公司内部网这样的旧浏览器。）

Answer 3

这些不同的属性称为“供应商前缀”： -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

Answer 4

很棒的问题。

许多程序员使用CanIUse来确定他们想要支持的所有浏览器是否支持特定的CSS属性。如果它们希望支持的所有浏览器都不完全支持，程序员应该使用供应商前缀（即-webkit-）。

示例方案

假设程序员想要使用Transform属性（CanIUse#Transform）。了解Android Browser 4.4＆amp; 4.4.4右上方有黄色警告？将鼠标悬停在它们上方并注意它显示“支持-webkit”？这是完全正确的。何时添加-webkit-供应商前缀。

我不同意你必须全部添加它们（尽管它确实没有伤害任何东西）。如果您在使用较新的CSS属性之前进行一些研究，那么您将获得更清晰的CSS / SASS / LESS /等，同时支持您心中所需的所有浏览器。 ：P

我认为有很棒的工具可以自动完成。 Xenos提到了一些。

祝你的CSS努力好运。

Answer 5

如果你想确保它可以在每个浏览器上运行，你需要添加所有这些浏览器，有些网站不支持旧浏览器，因此不需要关心你决定不支持的浏览器:)

Answer 6

这是我找到的解决方案，如果您使用的是 Visual Studio 代码，请转到扩展程序并搜索 css-auto-prefix