如果CSS转换2D可用,则使用JavaScript或jQuery进行检测

Question

我在我的网站上显示一个元素,我用-90deg旋转但是如果浏览器不支持CSS变换,那么该元素看起来错位并且不是很好.现在我想用JavaScript或jQuery检测(如果jQ或JS是无关紧要的,因为我在我的网站上使用/加载了jQ)如果支持通过CSS进行这种旋转？

我知道Modernizr,但只是为了那个小东西,我不想包括整个库(并加快网站的速度加载).

Answer 1

这是基于利亚姆答案的功能.它将返回第一个支持的前缀的名称,或者false是否支持任何前缀.

function getSupportedTransform() {
    var prefixes = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' ');
    var div = document.createElement('div');
    for(var i = 0; i < prefixes.length; i++) {
        if(div && div.style[prefixes[i]] !== undefined) {
            return prefixes[i];
        }
    }
    return false;
}

Answer 2

只需从 Modernizr 中提取您需要的内容即可

首先我们需要 testProps 函数

   /**
     * testProps is a generic CSS / DOM property test; if a browser supports
     *   a certain property, it won't return undefined for it.
     *   A supported CSS property returns empty string when its not yet set.
     */
    function testProps( props, prefixed ) {
        for ( var i in props ) {
            if ( mStyle[ props[i] ] !== undefined ) {
                return prefixed == 'pfx' ? props[i] : true;
            }
        }
        return false;
    }

然后运行 ​​cssTransform 测试

var tests = [];
 tests['csstransforms'] = function() {
        return !!testProps(['transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform']);
    };

如果tests['csstransforms']为true，那么您就可以使用该功能。