Setting vendor-prefixed CSS using javascript

...is a huge pain.

var transform = 'translate3d(0,0,0)';
elem.style.webkitTransform = transform;
elem.style.mozTransform = transform;
elem.style.msTransform = transform;
elem.style.oTransform = transform;

Is there a library/framework/better way to do this? Preferably with just one line of JS?

Solution 1:

I don't know of any library that does this, but if they are all just prefixes--that is, there is no difference in name or syntax--writing a function yourself would be trivial.

function setVendor(element, property, value) {
  element.style["webkit" + property] = value;
  element.style["moz" + property] = value;
  element.style["ms" + property] = value;
  element.style["o" + property] = value;
}

Then you can just use this in most cases.

Solution 2:

It's currently late 2015, and the situation has changed slightly. First of all, McBrainy's comment about capitalization above is important. The webkit prefix is now Webkit, but luckily only used by Safari at this point. Both Chrome and Firefox support el.style.transform without the prefix now, and I think IE does as well. Below is a slightly more modern solution for the task at hand. It first checks to see if we even need to prefix our transform property:

var transformProp = (function(){
  var testEl = document.createElement('div');
  if(testEl.style.transform == null) {
    var vendors = ['Webkit', 'Moz', 'ms'];
    for(var vendor in vendors) {
      if(testEl.style[ vendors[vendor] + 'Transform' ] !== undefined) {
        return vendors[vendor] + 'Transform';
      }
    }
  }
  return 'transform';
})();

Afterwards, we can just use a simple one-liner call to update the transform property on an element:

myElement.style[transformProp] = 'translate3d(0,' + dynamicY + 'px,0)';