Creating a generic CSS3 property retriever function

Home

Now that we understand the principle behind picking out the variant of a CSS3 property the browser supports, lets build on that and create a more generic function that accepts any original CSS3 property, and returns the variant the browser supports. What's involved here is first to define an array of browser CSS prefixes:

var css3vendors = ['', '-moz-','-webkit-','-o-','-ms-','-khtml-']

Notice how the first element is an empty string, for when the browser supports the original, unprefixed version of the property. We'll then loop through this array and combine it with any original CSS3 property to form the final JavaScript property for each variant, testing for support for that property. JavaScript properties follow the camel case syntax, meaning a CSS property such as -moz-border-radius needs to be transformed into MozBoxShadow, and ms-transform to msTransform etc. The following table lists the various vendor prefixes and their JavaScript equivalents:

**CSS vendor prefixes and JavaScript equivalents**
CSS prefix	JavaScript equivalent
-ms-	ms, such as msTransform
-moz-	Moz, such as MozBoxShadow
-webkit-	Webkit, such as WebkitBorderRadius
-o-	O, such as OTransform
-khtml-	Khtml, such as KhtmlTransform

So as you can see, with the exception of -ms-, all of the other CSS vendor prefixes when converted to JavaScript camel case should have their first letter capitalized. After that, the conventional camel case rules apply when converting the original CSS property to camel case.

Ok, it's time now to wrap all of the above into a function that will test for and return the version of the entered CSS3 property supported by the browser:

function getcss3prop(cssprop){
	var css3vendors = ['', '-moz-','-webkit-','-o-','-ms-','-khtml-']
	var root = document.documentElement
	function camelCase(str){
		return str.replace(/\-([a-z])/gi, function (match, p1){ // p1 references submatch in parentheses
			return p1.toUpperCase() // convert first letter after "-" to uppercase
		})
	}
	for (var i=0; i<css3vendors.length; i++){
		var css3propcamel = camelCase( css3vendors[i] + cssprop )
		if (css3propcamel.substr(0,2) == 'Ms') // if property starts with 'Ms'
			css3propcamel = 'm' + css3propcamel.substr(1) // Convert 'M' to lowercase
		if (css3propcamel in root.style)
			return css3propcamel
	}
	return undefined
}

To use this function, simply pass in an unaltered CSS property, and the function will return the vendor specific, JavaScript equivalent property supported by the browser:

getcss3prop('transform') // returns 'transform' or one of the variants, such as 'msTransform', 'MozTransform', 'WebkitTransform' etc
getcss3prop('border-radius') // returns 'borderRadius' or one of the variants, such as 'MozBorderRadius', 'WebkitBorderRadius' etc

If the browser doesn't support a particular CSS property period, undefined is returned. With the appropriate CSS3 JavaScript property returned, you can go about manipulating it in your code, such as:

var el = document.getElementById('mydiv')
el.style[getcss3prop('border-radius')] = '15px'
el.style[getcss3prop('transform')] = 'rotate(180deg) scale(1.05, 1.05)'
el.style[getcss3prop('transition')] = 'all 1s ease-in-out'

To further illustrate our getcss3prop() function in action, enter any CSS property inside the form above and press enter to see it return the corresponding CSS3 JavaScript property:

getcss3prop() function demo:

With the getcss3prop() function, we can easily retrieve the supported variant of any CSS property and manipulate it in JavaScript!