Vendor prefix detection with CSS transforms test

by soulwire

HTML

<div class="test"></div>

CSS

.test {
    -webkit-transform: perspective(600) rotateY(50deg);
    -webkit-transform-style: preserve-3d;
    background: #ff00ff;
    position: absolute;
    height: 200px;
    width: 200px;
    left: 40px;
    top: 40px;
}

JavaScript

// For detecting browser prefix and capabilities
var el = document.createElement( 'div' );
var re = /^(Moz|(w|W)ebkit|O|ms)(?=[A-Z])/;

// Establish vendor prefix and CSS 3D support
var vendor = (function() { for ( var p in el.style ) if( re.test(p) ) return p.match(re)[0]; })() || '';
var canRun = vendor + 'Perspective' in el.style;
var prefix = '-' + vendor.toLowerCase() + '-';
//alert( 'Vendor: ' + vendor + ', Prefix: ' + prefix + ', Can Run: ' + canRun + ', Perspective: ' + ('Perspective' in el.style) );
var a = [];
for ( var p in el.style ) if( /transform/ig.test(p) ) a.push(p);
alert(a.reverse().join('\n'));