17

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

Ender
  • 27,153
  • 7
  • 30
  • 34

5 Answers5

30

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.

Tikhon Jelvis
  • 67,485
  • 18
  • 177
  • 214
  • 23
    Make sure you capitalize the property name (`Transform` instead of `transform`). I discovered this the hard way... – Brian McCutchon Jun 12 '13 at 20:11
  • 1
    [Regarding capitalization of vendor-prefixed CSS property names in JavaScript](https://alanhogan.com/code/vendor-prefixed-css-property-names-in-javascript): tl;dr Do capitalize them, although in practice it doesn’t matter with Webkit! – Alan H. May 02 '22 at 18:54
  • I must say that this answer really is just slightly better than in the question :D – Brainmaniac May 26 '22 at 21:35
17

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)';
cacheflowe
  • 759
  • 9
  • 9
  • 1
    Seems that Firefox support for non-prefixed transforms is pretty widespread now: http://caniuse.com/#search=transform – Matt Jensen Dec 01 '16 at 18:26
7

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

75th Trombone
  • 1,364
  • 15
  • 28
hitesh kumar
  • 81
  • 1
  • 6
3

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

Andrea De Carolis
  • 39
  • 2
0

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.

roraima
  • 609
  • 5
  • 6