Vendor Prefixing CSS In JavaScript Functions

If you’re working on a page with JavaScript functions that require vendor prefixing, it can be a bit of pain having to continually repeat yourself writing all your function outputs with different vendor prefixes.

If you’re working with CSS this can be a bit repetitive (unless you’re using SASS).  A typical example might be something like this:

CSS

.box {
/*transform*/
-webkit-transform: translate(-100px,0);
-moz-transform: translate(-100px,0);
-ms-transform: translate(-100px,0);
-o-transform: translate(-100px,0);
transform: translate(-100px,0);
}

However, when JavaScript comes into the picture we have more options than you may think. You might use something like this:

JavaScript

var box = document.querySelector('.box');

box.style.msTransform = "translate(-100px,0)"; // IE
box.style.webkitTransform = "translate(-100px,0)"; // Chrome and Safari
box.style.mozTransform = "translate(-100px,0)"; // FireFox
box.style.oTransform = "translate(-100px,0)"; // Opera
box.style.transform = "translate(-100px,0)"; // Fallback

Technically, there’s nothing wrong with doing something like that. We’re simply replicating a CSS workflow with JavaScript. However, since we’re already using JavaScript to set CSS styles, why should we limit ourselves?
A more elegant solution might be to ask the browser which vendor prefix it uses and then then set that property only. This solves two problems – Firstly we’re not adding un-needed CSS prefixes. And secondly, we can write more concise JavaScipt code by not repeating ourselves over and over (on larger projects).
The first thing we need is to set our function that checks what prefix to use:

JavaScript

// Check Prefix
function getsupportedprop(proparray) {
  var root = document.documentElement
  for (var i=0; i<proparray.length; i++) { 
   if (proparray[i] in root.style) { return proparray[i] }
 }
}

Now we can call that function to cache a variable for our transform prefix.

JavaScript

// Vendor Prefix Transform
var prefixtransform = getsupportedprop([
"transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"
]);

Then, when it comes time to use it, we can use our variable with the transform prefixes.

JavaScript

var box = document.querySelector('.box');
box.style[prefixtransform] = "translate(-100px,0)";

The final code would like like this:

JavaScript

// Get Prefix Support
function getsupportedprop(proparray) {
var root = document.documentElement
for (var i=0; i<proparray.length; i++) {
if (proparray[i] in root.style) { return proparray[i] }
}
}

// Cahce Prefix Transform
var prefixtransform = getsupportedprop(["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"]);

// Cache Box
var box = document.querySelector('.box');

// Add styles
box.style[prefixtransform] = "translate(-100px,0)";

And here's a CodePen as an example:

See the Pen FvaBw by Abhishek (@abhibagul) on CodePen.