Setting vendor-prefixed CSS using javascript

Question

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

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

Answer 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)';

Answer 3

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: https://davidwalsh.name/vendor-prefix

Answer 4

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

Answer 5

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.