Vendor prefixing with inline styles

Question

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.

BoltClock · Accepted Answer · 2017-12-29T03:08:34.710

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

Thank you for this. I understood how the declarations functioned in terms of cascading and overriding on another depending on the order. What I was puzzled about was why they weren't explicitly showing up after I had declared them in my script. So Safari essentially gets fed all three declarations, recognises `-webkit-` but simplifies the declaration as prefix isn't necessary, ignores `-ms-`, then gets overridden by the unprefixed version of the declaration. In theory, would older browser that required prefixing show it explicitly inline? — DanMad, Dec 29 '17 at 03:04
@DanMad: Yes, an older browser doesn't recognize an unprefixed property and therefore isn't going to display it as such in the inspector (I know some browsers lie about certain things, but I haven't heard of any lying about this... yet). — BoltClock, Dec 29 '17 at 03:05

Vendor prefixing with inline styles

1 Answers1