getCssPropertyName.js

/**
 *	@private
 *	@function
 *	@description Get a supported css property name for a css property
 *		Will search common vendor prefixes for supported value.
 *
 *	@param {string} propertyName Name without any prefix
 *
 *	@return {string} Supported property name.
 *		This will be an empty string for unsupported properties.
 *
 *	@example
 *		getCssPropertyName('border-radius');
 *		// returns...
 *		// 'border-radius' if supported, else...
 *		// '-moz-border-radius' if supported, else...
 *		// '-webkit-border-radius' if supported, else...
 *		// etc etc, else ''
 */
var getCssPropertyName = (function() {
	var style = document.createElement('b').style,
		prefixes = ['Webkit', 'O', 'Ie', 'Moz'],
		cache = {};

	return function(propertyName) {
		if ( propertyName in cache ) {
			return cache[propertyName];
		}

		var supportedValue = '',
			i = prefixes.length,
			upperCamelPropertyName,
			camelPropertyName = propertyName.replace(/-([a-z])/ig, function( all, letter ) {
				return letter.toUpperCase();
			});

		if ( camelPropertyName in style ) {
			supportedValue = propertyName;
		}
		else {
			// uppercase first char
			upperCamelPropertyName = camelPropertyName.slice(0,1).toUpperCase() + camelPropertyName.slice(1);
			while (i--) if ( prefixes[i] + upperCamelPropertyName in style ) {
				// convert MozBlah to -moz-blah
				supportedValue = (prefixes[i] + upperCamelPropertyName).replace( /([A-Z])/g, '-$1' ).toLowerCase();
				break;
			}
		}

		return cache[propertyName] = supportedValue;
	}
})();