Определите с помощью JavaScript или jQuery, если доступно CSS-преобразование 2D

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

Это примерно так же просто, как и вы, и 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

Этот код проверяет поддержку 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;
}

Answer 5

Просто извлеките то, что вам нужно, из 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']);
    };

if tests ['csstransforms '] имеет значение true, тогда у вас есть доступная функция.