javascript - 使用 JavaScript 或 jQuery 检测 CSS transform 2D 是否可用

Question

我在我的网站上显示一个元素，我以 -90 度旋转，但如果浏览器不支持 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

这就像你得到的和jsfiddle一样简单。它不再进行无限循环。

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

Answer 3

这是我用来检测是否支持 CSS3 转换的代码：

var div = document.createElement('div');
div.setAttribute('style', 'transition:top 1s ease;-webkit-transition:top 1s ease;-moz-transition:top 1s ease;-o-transition:top 1s ease;');
document.body.appendChild(div);
var cssTransitionsSupported = !!(div.style.transition || div.style.webkitTransition || div.style.MozTransition || div.style.OTransitionDuration);

div.parentNode.removeChild(div);
div = null;

我故意不寻求 Microsoft 支持，因为 Microsoft 尚未发布支持 CSS3 转换的浏览器，并且我不希望我的代码自动支持我将来尚未测试的实现。

Answer 4

只需从 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'] 为真，那么您就有了可用的功能。

Answer 5

此代码测试2D 转换支持。

它可以轻松调整以检测3D 变换支持。只需添加 'translateZ(1)' 来测试 CSS（参见defaultTestValues源代码）。

此代码的优点是它检测支持的供应商前缀（如果有）。叫它：

testCSSSupport('transform')

可能的返回值：

false，当功能不受支持时，或

{
    vendor: 'moz',
    cssStyle: '-moz-transform',
    jsStyle: 'MozTransform'
}

支持功能时

/**
 * Test for CSS3 feature support. Single-word properties only by now.
 * This function is not generic, but it works well for transition and transform at least
 */
testCSSSupport: function (feature, cssTestValue/* optional */) {
    var testDiv,
        featureCapital = feature.charAt(0).toUpperCase() + feature.substr(1),
        vendors = ['', 'webkit', 'moz', 'ms'],
        jsPrefixes = ['', 'Webkit', 'Moz', 'ms'],
        defaultTestValues = {
            transform: 'translateX(.5em)'
           // This will test for 2D transform support
           // Add translateZ(1) to test 3D transform
        },
        testFunctions = {
            transform: function (jsProperty, computed) {
                return computed[jsProperty].substr(0, 9) === 'matrix3d(';
            }
        };

    function isStyleSupported(feature, jsPrefixedProperty) {
        if (jsPrefixedProperty in testDiv.style) {
            var testVal = cssTestValue || defaultTestValues[feature],
                testFn = testFunctions[feature];
            if (!testVal) {
                return false;
            }

            //Assume browser without getComputedStyle is either IE8 or something even more poor
            if (!window.getComputedStyle) {
                return false;
            }

            testDiv.style[jsPrefixedProperty] = testVal;
            var computed = window.getComputedStyle(testDiv);

            if (testFn) {
                return testFn(jsPrefixedProperty, computed);
            }
            else {
                return computed[jsPrefixedProperty] === testVal;
            }
        }
    }

    var cssPrefixedProperty,
        jsPrefixedProperty,
        testDiv = document.createElement('div');

    for (var i = 0; i < vendors.length; i++) {
        if (i === 0) {
            cssPrefixedProperty = feature;  //todo: this code now works for single-word features only!
            jsPrefixedProperty = feature;   //therefore box-sizing -> boxSizing won't work here
        }
        else {
            cssPrefixedProperty = '-' + vendors[i] + '-' + feature;
            jsPrefixedProperty = jsPrefixes[i] + featureCapital;
        }

        if (isStyleSupported(feature, jsPrefixedProperty)) {
            return {
                vendor: vendors[i],
                cssStyle: cssPrefixedProperty,
                jsStyle: jsPrefixedProperty
            };
        }
    }

    return false;
}