jQuery CSS browser Prefix

Get browser specific CSS style name properties... // eg. "MozBorderRadius" or "WebkitTransform" ...

by molokoloco

HTML

<div id="myDiv"></div>

CSS

div#myDiv {
    background:orange;
    width:50px;
    height:50px;
    margin:50px;
}

JavaScript

///////////////////////////////////////////////////////////////////////////
// A function to get browser specific CSS styles names properties...    //
// eg. "MozBorderRadius" or "WebkitTransform" ...                      //
// By molokoloco - http://www.b2bweb.fr - 2011                        //
///////////////////////////////////////////////////////////////////////
// Can find it in my repository
// https://github.com/molokoloco/FRAMEWORK/blob/master/jquery.plugins/
// [Edit] : I found a rock solid plugin who can handle that very fine
// https://github.com/codler/jQuery-Css3-Finalize
////////////////////////////////////////////////////////////////////

var cssPrefixString = {};
var cssPrefix = function(propertie) {
    if (cssPrefixString[propertie] || cssPrefixString[propertie] === '') return cssPrefixString[propertie] + propertie;
    var e = document.createElement('div');
    var prefixes = ['', 'Moz', 'Webkit', 'O', 'ms', 'Khtml']; // Various supports...
    for (var i in prefixes) {
        if (typeof e.style[prefixes[i] + propertie] !== 'undefined') {
            cssPrefixString[propertie] = prefixes[i];
            return prefixes[i] + propertie;
        }
    }
    return false;
};
    
// Usages examples /////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////

var cssTransform = cssPrefix('Transform'); // "MozTransform" or "WebkitTransform"
if (cssTransform ) {
    var cssProp = {};
    cssProp['border'] = '1px solid rgba(0, 0, 0, .5)';
    cssProp[cssPrefix('Transform')] = 'rotate(20deg)';
    cssProp[cssPrefix('borderRadius')] = '5px'; // Keep the camelCaze (jQuery like)
    cssProp[cssPrefix('boxShadow')] = '2px 2px 6px grey';
    $('div#myDiv').css(cssProp);
    // console.log(cssProp);
}

// Want more code ? That here... 
// https://github.com/molokoloco/FRAMEWORK/