带有内联样式的供应商前缀

Question

我正处于需要使用 jQuery 为元素的位置动态设置动画的情况。我有一些外部 css 可以处理所有事情 css，然后我的脚本添加了 transform 内联样式。

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

我的问题是为什么我正在测试的所有浏览器（Safari 11.0.2、Firefox 56.0、Chrome 63.0.3239.84）都忽略供应商前缀并返回以下内容？

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

我显然希望支持尽可能多的浏览器...

Fiddle here 如果查看代码的作用有帮助。

Answer 1

多年来，没有浏览器需要 transform 的前缀。一旦无前缀 transform 发布，浏览器只需将其带前缀属性实现为无前缀属性的别名，这意味着带前缀和无前缀的声明将在级联中相互覆盖，具体取决于声明的顺序。此外，由于它们是别名，即使您删除显式的无前缀声明，它们仍将显示为无前缀。

这只是浏览器告诉您不要担心新版本中不需要前缀的方式。它们适用于尚不支持无前缀属性的旧版本。例如，唯一需要 -ms-transform 的 Internet Explorer 版本是 9。Internet Explorer 10 不需要前缀（对于转换和 ), 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）。

带有内联样式的供应商前缀

Vendor prefixing with inline styles

javascript

css

jquery

inline-styles

vendor-prefix