当非前缀父级更新时,以供应商为前缀的CSS属性是否会更新?

时间:2017-04-21 16:28:40

标签: css vendor-prefix

当我注意到单时序功能的定义已经更新为包含frames()时序功能时,我最近重新阅读了W3C CSS时序函数module(参见{{3} }):

<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>

我在使用frames()属性时看到animation当前是否正常工作,但我觉得这个功能在我使用的浏览器上目前不支持(但cubic-bezier()如图所示{{3当然对-moz-animation起作用,正如小提琴所示。

当前支持的供应商前缀属性(例如-moz-animation,如上面的JSFiddle)更新以支持父(非前缀)属性的更改?也就是说,例如frames()属性的浏览器支持animation,例如,它是否受支持-moz/-webkit-animation属性,或者这不是一般化的吗?(即,它取决于)

1 个答案:

答案 0 :(得分:1)

大多数以供应商为前缀的功能似乎都会更新以匹配标准化实现,因为通常前缀在生产中出厂时会重新实现为其未加前缀的对应项的别名。但我不认为这可以推广 - 好吧,我想我只是这样做了,所以我会说这不能依赖。渐变是一个众所周知的前缀功能示例,未更新以符合最新标准。

实际上,该语句甚至不是100%正确 - 因为Mozilla 确实实际更新了他们的-moz-linear-gradient()函数以接受相同的to <side-or-corner>语法以及旧的<side-or-corner>语法1}}语法(both of which have completely opposite meanings),而基于WebKit的浏览器以及IE11仍然不接受to <side-or-corner>-webkit-linear-gradient()函数的新-ms-linear-gradient()语法(和{ {1}}完全脱离了Microsoft Edge。

但是每个浏览器都正确地实现了线性渐变的标准化语法:指定-ms-linear-gradient()关键字时需要to关键字;使用<side-or-corner>表达式中没有to的关键字在每个浏览器中都无效。

换句话说:

  1. linear-gradient()适用于Firefox;
  2. -moz-linear-gradient(top, #FF0000, #FFFF00)也适用于Firefox;
  3. -moz-linear-gradient(to bottom, #FF0000, #FFFF00)适用于Safari和Chrome;
  4. -webkit-linear-gradient(top, #FF0000, #FFFF00)在Safari或Chrome中不起作用;
  5. -webkit-linear-gradient(to bottom, #FF0000, #FFFF00)适用于IE10和IE11;
  6. -ms-linear-gradient(top, #FF0000, #FFFF00)在IE10和IE11中不起作用;
  7. -ms-linear-gradient(to bottom, #FF0000, #FFFF00)无法在任何浏览器中使用;
  8. linear-gradient(top, #FF0000, #FFFF00)适用于所有浏览器。
  9. 所以,考虑到带有前缀渐变的混乱,我强烈建议不要依赖前缀实现来像标准一样工作。即使一个浏览器在实现变得稳定后重新实现前缀作为该功能的未加前缀版本的别名,但并非所有浏览器都可以这样做。

    话虽如此,所有浏览器很可能将其前缀linear-gradient(to bottom, #FF0000, #FFFF00)-*-animation属性别名为其未加前缀的对应项,因此同样可能会自动更新带前缀的属性以支持新的时序作为其未经修饰的同行的副作用,这些副作用正在更新中。