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 条件失败并返回 undefined
如果 if 条件通过，则返回正确的 css-3 支持属性并存储在 cssProps 中。

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

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

Answer 1

你的大点"is this a bullet proof way of checking what transition is supported in the user's browser"，答案是否定的。虽然这几乎肯定会让您获得 99.99% 的所有支持它的浏览器，但不可避免地会有一些奇怪的组合（使用 custom version of webkit/chrome 的中档三星 android 设备上的 webview 是共同的罪魁祸首）会让你无法成为真正的 "bulletproof"。

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

正如其他评论者所提到的，您始终可以创建一个自定义构建，其中包含您想要的内容。话虽这么说，如果您想要最精简的 javascript 构建，那么按照您所做的去做是有意义的（因为 Modernizr 几乎肯定有 support/code 用于与您正在做的事情完全无关的事情）。如果是这样，那么我建议您查看 caniuse 转换结果。它基本上所有没有前缀，除了旧的 android。

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

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

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

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

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

CSS3 转换 属性 的特征检测

Feature detection for CSS3 transition property

html

javascript

css

modernizr

CSS3 转换属性的特征检测