如果CSS转换2D可用，则使用JavaScript或jQuery进行检测

我在我的网站上显示一个元素，我用-90deg旋转，但如果浏览器不支持CSS变换，元素看起来错位并且不太好。 现在我想用JavaScript或jQuery检测（如果jQ或JS是无关紧要的，因为我在我的网站上使用/加载了jQ），如果支持通过CSS进行此轮换？

我知道Modernizr，但只是为了那个小东西，我不想包括整个库（并加快网站的速度加载）。

Answer 1

这是基于利亚姆答案的function。 它将返回第一个支持的前缀的名称，如果不支持任何前缀，则返回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; 

我故意不寻求微软支持，因为微软尚未发布支持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’]为真，那么你就有了这个function。

Answer 5

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

它可以很容易地调整，以检测3D变换支持。 只需添加’translateZ（1）’来测试CSS（参见源代码中的defaultTestValues ）。

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

 testCSSSupport('transform') 

可能的返回值：

false ，当function不受支持时，或

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

何时支持function

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