CSS3过渡属性的特征检测

Question

我只是弄乱了这个现代化的人来查明，他们如何检查用户的浏览器是否支持某个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中。

我只是想知道，这是一种检查用户浏览器支持哪种转换的防弹方式？ 或者如果它受到支持？

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

Answer 1

更大的一点是“这是一种检查用户浏览器支持哪种转换的防弹方式”，答案是否定的。 虽然这几乎可以肯定会让99.99％的浏览器支持它，但不可避免地会有一些奇怪的组合（中端三星Android设备的webview使用自定义版本的webkit / chrome是常见的罪魁祸首）这将使你免于真正“防弹”。

话虽这么说，虽然你很好地完成了Modernizr所做的逻辑，但我会质疑你需要这样做。

正如其他评论者所提到的，您始终可以创建一个自定义构建，其中包含您想要的内容。 话虽如此，如果你想要最简洁的javascript构建，那么做你已经完成的事情是有意义的（因为Modernizr几乎肯定有支持/代码用于与你正在做的事情完全无关的事情）。 如果是这种情况，那么我建议你查看过渡的caniuse结果。 它基本上都没有前缀，除了旧的android。

这意味着您的检测可以更小，更小

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

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

这将给你几乎相同的结果（无可否认地忽略旧版浏览器 - 如果重要的话，由你决定）在更小的空间内。

无论哪种方式 - 功能检测的精彩开始，我希望看到您尽快为Modernizr贡献自己的力量！