13

-90deg で回転する要素を自分のサイトに表示していますが、ブラウザーが CSS 変換をサポートしていない場合、要素の位置がずれており、あまり良くありません。CSSを介したこのローテーションがサポートされているかどうか、JavaScriptまたはjQueryで検出したい（サイトですでにjQを使用/ロードしているため、jQまたはJSの場合は関係ありません）？

私はModernizrを知っていますが、その小さなことだけのために、そのライブラリ全体を含めたくありません（そして、Webサイトの速度の読み込みをスピードダウンします）.

4

5 に答える 5

32

Liamの回答に基づく関数は次のとおりです。サポートされている最初のプレフィックスの名前を返すか、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;
}
于 2012-09-27T16:30:35.480 に答える
4

これはあなたが得るのと同じくらい簡単で、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;
}
于 2011-08-27T02:26:17.997 に答える
2

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 は CSS3 トランジションをサポートするブラウザーをまだ出荷しておらず、将来まだテストしていない実装をコードで自動的にサポートしたくないため、意図的に Microsoft のサポートを探していません。

于 2011-08-27T06:35:15.623 に答える
0

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 の場合、機能を利用できます。

于 2011-08-27T02:22:58.153 に答える
0

このコードは、 2D 変換のサポートをテストします。

代わりに、 3D 変換のサポートを検出するように簡単に調整できます。CSS をテストするには、'translateZ(1)' を追加するだけです (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;
}
于 2014-11-07T09:57:25.873 に答える