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?

Crinkleroot

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.

Weald

Make sure you capitalize the property name (Transform instead of transform). I discovered this the hard way... – Agneta

Regarding capitalization of vendor-prefixed CSS property names in JavaScript: tl;dr Do capitalize them, although in practice it doesn’t matter with Webkit! – Ozonide

I must say that this answer really is just slightly better than in the question :D – Tophus

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

Apprehend

Seems that Firefox support for non-prefixed transforms is pretty widespread now: caniuse.com/#search=transform – Sporadic

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

Stans

Please post the relevant parts of your externally linked answer directly here, as an external source might change. – Tang

This method plays off of the fact that there will always be a vendor-prefixed property in the style declaration. – Devilkin

Answer 4

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

Maori

He did not ask for a jquery tool. – Jota

@AdamArold He asked for 'a library/framework/better way to do this'. This can be a jQuery plugin – Thorium

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.

Broadus