CSS3过渡属性的特征检测

Feature detection for CSS3 transition property

本文关键字：特征检测 属性 CSS3      更新时间：2023-09-26

我只是在搞乱这个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，该IIFE基本上检查了css属性的所有可能的浏览器版本以及标准的W3C变体。检查thing属性是否可以应用于我们创建的html元素，如果不能应用，则if条件失败并返回undefined

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

我只是想知道，这是检查用户浏览器中支持的过渡的防弹方法吗?或者它是否被支持?

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

对于你更大的问题"这是一种检查用户浏览器支持哪种过渡的万无一有的方法吗"，答案是否定的。虽然这几乎肯定会让你99.99%的浏览器都支持它，但不可避免地会有一些奇怪的事情组合(在中档三星安卓设备上使用自定义版本的webkit/chrome是一个常见的罪魁)，这将使你无法真正"防弹"。

话虽这么说，虽然你在提炼Modernizr的逻辑方面做得很好，但我怀疑你是否需要这样做。

正如其他评论者所提到的，您总是可以创建一个包含您想要的内容的自定义构建。话虽如此，如果您想要尽可能精简的javascript构建，那么做您所做的事情是有意义的(因为Modernizr几乎肯定会为与您正在做的事情完全无关的事情提供支持/代码)。如果是这样的话，那么我建议您查看转换的canuse结果。除了老版本的android，基本上都是所有没有前缀。

这意味着你的检测可以是一个非常非常小的

var supportsTransitions = function() {
  var style = document.documentElement.style;
  return 'transition' in style || 'webkitTransition' in style
}

这将给你几乎相同的结果(不可否认忽略了旧的浏览器-这取决于你是否重要)，在更小的占用空间。

无论哪种方式-在特征检测方面的精彩开始，我希望看到你很快为Modernizr贡献你自己的!

相关文章：