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