Setting vendor-prefixed CSS using javascript

Problem

...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?

Problem courtesy of: Ender

Solution

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 courtesy of: Tikhon Jelvis

Discussion

There's this jquery plugin that take care of it https://github.com/codler/jQuery-Css3-Finalize

Discussion courtesy of: Andrea De Carolis

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)';
Discussion courtesy of: cacheflowe

You can find the respective vendor prefix using Javascript with the following code-

var prefix = (function () {
  var styles = window.getComputedStyle(document.documentElement, ''),
    pre = (Array.prototype.slice
      .call(styles)
      .join('') 
      .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
    )[1],
    dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
  return {
    dom: dom,
    lowercase: pre,
    css: '-' + pre + '-',
    js: pre[0].toUpperCase() + pre.substr(1)
  };
})();

The above returns an object of the respective browser's vendor prefix.

Saved a lot of duplicate code in my scripts.

Source - David Walsh's blog: http://davidwalsh.name

Discussion courtesy of: hitesh kumar

If you are setting up your workflow with Gulp for example you can use Postcss autoprefixer which is handy tool in solving browser vendor prefixes. It uses JS to transform you css.

Discussion courtesy of: Ivan Baresic

This recipe can be found in it's original form on Stack Over Flow.