CSS3 过渡属性的特征检测

我只是想弄明白这个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 变体。检查 thing 属性是否可以应用于我们创建的 html 元素，如果不能应用于if条件失败并返回 undefined

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

我只是想知道，这是一种检查用户浏览器支持哪种转换的防弹方法吗？或者是否完全支持？

这确实是我第一次尝试浏览器功能检测，所以我想知道。

对于您更重要的观点“这是一种检查用户浏览器支持哪种转换的防弹方法”，答案是否定的。虽然这几乎肯定会让你获得 99.99% 的支持它的浏览器，但不可避免地会出现一些奇怪的组合（中端三星 Android 设备上的 webview 使用webkit/chrome 的自定义版本 http://www.quirksmode.org/blog/archives/2015/02/counting_chromi.html是一个常见的罪魁祸首），这将使您无法真正“防弹”。

话虽这么说，虽然你在提取 Modernizr 所做的逻辑方面做得很好，但我会质疑你这样做的必要性。

正如其他评论者所提到的，您始终可以创建一个包含您想要的内容的自定义构建。话虽这么说，如果您想要尽可能精简的 javascript 构建，那么做您所做的事情是有意义的（因为 Modernizr 几乎肯定对与您正在做的事情完全无关的事情提供支持/代码）。 如果是这种情况，那么我建议您检查一下caniuse http://caniuse.com/#search=transition过渡的结果。其基本上all除较旧的 android 之外，没有前缀。

这意味着您的检测可以小得多

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

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

这将为您提供几乎相同的结果（诚然，忽略旧版浏览器 - 这取决于您是否重要），并且占用空间要小得多。

无论哪种方式 - 特征检测的美好开始，我希望很快看到您为 Modernizr 做出自己的贡献！