Search code examples
javascriptjquerycssinline-stylesvendor-prefix

Vendor prefixing with inline styles

I'm in a situation where I need to dynamically animate the position of an element with jQuery. I have some external css that takes care of all things css, then my script adds a transform inline style.

html:

<div></div>

css:

div {
  width: 100px;
  height: 100px;
  background: pink;
  transition: all 1s ease;
}

js:

$(function() {
  setTimeout(function() {
    $('div').css({
      '-webkit-transform' : 'translateY(100%)',
      '-ms-transform' : 'translateY(100%)',
      'transform' : 'translateY(100%)',
    });
  }, 1000);
});

My question is why are all browsers I am testing (Safari 11.0.2, Firefox 56.0, Chrome 63.0.3239.84) ignoring the vendor-prefixing and returning the following?

<div style="transform: translateY(100%);"></div>

I'm obviously looking to support as many browsers as possible...

Fiddle here if seeing what the code does helps.

Solution

  • No browser has required a prefix for transform for many years. Once unprefixed transform has shipped, a browser simply implements its prefixed property as an alias of the unprefixed property, which means that the prefixed and unprefixed declarations will override one another in the cascade depending on the order of declarations. Furthermore, since they are aliases, they'll still show up as unprefixed even if you remove the explicit unprefixed declaration.

    This is just browsers' way of telling you not to worry about the prefixes in the newer versions that don't need them. They are intended for older versions that don't yet support the unprefixed properties. For example, the only version of Internet Explorer that requires -ms-transform is 9. Internet Explorer 10, which doesn't need the prefix (for transforms and many other features), came out in 2012. Note also that some browsers, like Firefox, are known to drop support for really old prefixed properties altogether after keeping them aliased for a while — again, not something you have to worry about since you always make sure to include unprefixed declarations (which not everyone does).