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

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

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

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

Answer 1

对于“这是检查用户浏览器支持哪些过渡的一种防弹方法”，答案是否定的。虽然这几乎肯定会让你在所有支持它的浏览器中获得 99.99% 的支持，但不可避免地会出现一些奇怪的组合（使用custom version of webkit/chrome 的中端三星安卓设备上的 webview 是常见的罪魁祸首）将保持你从真正的“防弹”。

话虽如此，虽然您在提取 Modernizr 所做的逻辑方面做得很好，但我会质疑您是否需要这样做。

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

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

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

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

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

无论哪种方式 - 特征检测的良好开端，我希望很快看到你为 Modernizr 贡献自己的力量！