CSS3过渡属性的特征检测

Question

我只是在玩弄这个modernizr，想找出他们如何检查用户浏览器中是否支持某个CSS属性，基本上我只想有一个小脚本，告诉我用户的浏览器是否支持CSS过渡效果。我将modernizr的代码抽象到以下类似的形式：

Elem = document.createElement('Alx');
      eStyle = Elem.style;

      var cssProp = (function check(){
            props = ["transition", "WebkitTransition", "MozTransition", "OTransition", "msTransition"];
            for(var i in props) {
              var prop = props[i];
                console.log(prop);
                if (!contains('-' , prop) && eStyle[prop] !== undefined ) {
                        return prop;
                }
            }
      })();

    /* The contains function */

   function contains( str, substr ) {
      return !!~('' + str).indexOf(substr);
   }

Modernizr几乎做了相同的事情，我只是做了一些更改并硬编码了数组值以简化事情。脚本的工作方式如下。

• 创建一个html元素（不必是有效的html元素）。

• 执行一个IIFE，基本上遍历所有可能的浏览器版本的css属性以及标准的W3C变体。检查是否可以将该属性应用于我们创建的html元素，如果无法应用，则if条件失败并返回未定义。

• 如果if条件通过，则正确的css-3支持属性将被返回并存储在cssProps中。

我只想知道，这是一种检查用户浏览器中支持哪种过渡效果的绝对可靠的方法吗？还是说它根本没有得到支持？

这实际上是我第一次尝试浏览器特性检测，所以我想知道。

- Alexander Solonik

---

我不明白为什么你不直接使用Modernizr。你可以创建一个非常小的自定义构建，这样就不必担心是否做得正确了。现在，你要求我们验证你从其他地方黑客攻击的代码 - 如果你想知道它是否有效，那就自己测试一下吧。 - user663031

你可以制作自己的现代化工具来检查特定事项，比如只有CSS3过渡效果。前往下载页面，仅勾选CSS Transition复选框，然后点击生成。 - zgood

@torazaburo，你说得没错，但我的目标是学会自己编写代码，而不仅仅是使用库。是的，我正在请求您验证我的代码，但这不是我唯一在请求的事情。最后，每个为Web编写代码的JavaScript程序员都想知道库内部的工作原理。您提出的“使用自定义构建”方案很好，高效并且肯定可以节省时间...但“那不是我想要的，也肯定不适用于所有用例”。我希望我已经明确了我的意图和观点。如果您还有进一步的理解困难，请问我。 - Alexander Solonik

Answer 1

“关于您提出的“这是检查用户浏览器中支持哪种转换的绝对可靠方式吗”的更大问题，答案是否定的。虽然这几乎可以确保您获得99.99%的所有支持它的浏览器，但不可避免地会有一些奇怪的组合情况（例如使用自定义版本的webkit/chrome的中档三星Android设备上的Webview），这将使您无法真正做到“绝对可靠”。

话虽如此，虽然您很好地提取了Modernizr的逻辑，但我会质疑您这样做的必要性。

”

作为其他评论者已经提到的，你可以创建一个只包含你想要内容的自定义构建。尽管如此，如果你想要最精简的 JavaScript 构建（因为 Modernizr 几乎肯定支持/编码了与你正在做的完全无关的东西），那么这样做是有道理的。 如果是这种情况，我建议你查看 caniuse 的过渡效果结果。基本上除了旧版 Android 以外，全部都不需要前缀。 这意味着你的检测代码可以更小得多。

var supportsTransitions = function() {
  var style = document.documentElement.style;

  return 'transition' in style || 'webkitTransition' in style
}

这将在更小的占地面积中给你几乎相同的结果（不过要忽略旧版浏览器 - 这取决于你是否关心）。

无论哪种方式，都是特征检测的好开始，希望能很快看到你为 Modernizr 做出自己的贡献！

- Patrick

---

谢谢，你完美地回答了我的问题。我已经使用Modernizr有一段时间了，它非常有用，我喜欢挖掘代码，并希望很快能做出贡献 :) - Alexander Solonik