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

Just pull what you need out of Modernizr

First we need the testProps function

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

Then run the cssTransform test

var tests = [];
 tests['csstransforms'] = function() {
        return !!testProps(['transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform']);
    };

if tests['csstransforms'] is true, then you have the feature available.