使用JavaScript或jQuery檢測，如果CSS變換2D可用

Question

我在我的網站上顯示一個元素，我旋轉-90deg 但如果瀏覽器不支持CSS變換元素 看起來錯位並且不太好。 現在我想檢測與JavaScript或jQuery（它是無差別的 如果jQ或JS，因爲我使用/已加載jQ在我的網站上）如果通過CSS這種旋轉支持？

我知道Modernizr但只是爲了那件小事我不想包括整個庫（並加快網站速度加載速度）。

Answer 1

只要把你需要什麼了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']); 
    }; 

如果測試[ 'csstransforms']是真實的，那麼你有這個功能可用。

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; 

我故意不找微軟的支持，因爲微軟還沒有發貨，支持CSS3瀏覽器轉換，我不希望我的代碼自動支持我未來還未測試的實現。

Answer 4

這是一個基於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; 
} 

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; 
}