Detect with JavaScript or jQuery if CSS transform 2D is available

Question

I\'m displaying a element on my site which I rotate with -90deg but if a browser doesn\'t support the CSS transform the element looks misspositioned and not really good. Now I w

Answer 1

Here's the code I'm using to detect if CSS3 transitions are supported:

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;

I'm purposefully not looking for Microsoft support since Microsoft hasn't yet shipped a browser that supports CSS3 transitions and I don't want my code automatically supporting an implementation I haven't tested yet in the future.