Question

我只是乱搞这个现代化的人来查明，他们如何检查用户的浏览器是否支持某个CSS属性，基本上我只是想要一个小脚本告诉我用户是否＆＃ 39;浏览器支持CSS过渡。我将现代化代码抽象为以下内容：

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的中档三星Android设备上的webview是常见的罪魁祸首）将使你免于真正“防弹”。

话虽如此，虽然你做了很好的工作来理解Modernizr的逻辑，但我会质疑你需要这样做。

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

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

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

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

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

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

CSS3过渡属性的特征检测

1 个答案: