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



我最近重新阅读了W3C CSS定时函数模块,当时我注意到单定时函数的定义已更新为包括frames()定时函数(请参阅本节):

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

我 JSFiddled 以查看frames()在使用animation属性时当前是否有效,但似乎我使用的浏览器当前不支持此功能(但此处所示cubic-bezier()当然适用于-moz-animation,如小提琴所示)。

是当前支持的供应商前缀属性(例如-moz-animation,如上面的 JSFiddle) 更新以支持父(非前缀)属性中的更改?也就是说,当例如frames()浏览器支持animation属性,是否支持例如-moz/-webkit-animation属性,还是不能一概而论?(即,这取决于)

大多数以供应商为前缀的功能似乎确实进行了更新以匹配标准化实现,因为通常,当后者在生产中交付时,前缀会作为其无前缀对应项的别名重新实现。但我不认为这可以一概而论——好吧,我想我只是这样做了,所以我会说这不能依赖。梯度是前缀特征未更新以匹配最新标准的众所周知的示例。

实际上,这种说法甚至不是100%正确的——因为Mozilla确实更新了他们的-moz-linear-gradient()函数,以接受相同的to <side-or-corner>语法以及旧的<side-or-corner>语法(两者都有完全相反的含义),而基于WebKit的浏览器以及IE11仍然不接受新的to <side-or-corner>语法作为其-webkit-linear-gradient()-ms-linear-gradient()函数(-ms-linear-gradient()完全从Microsoft Edge中消失)。

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

换句话说:

  1. -moz-linear-gradient(top, #FF0000, #FFFF00)在火狐中工作;
  2. -moz-linear-gradient(to bottom, #FF0000, #FFFF00)也适用于火狐;
  3. -webkit-linear-gradient(top, #FF0000, #FFFF00)适用于 Safari 和 Chrome;
  4. -webkit-linear-gradient(to bottom, #FF0000, #FFFF00)在 Safari 或 Chrome 中不起作用;
  5. -ms-linear-gradient(top, #FF0000, #FFFF00)适用于IE10和IE11;
  6. -ms-linear-gradient(to bottom, #FF0000, #FFFF00)在 IE10 和 IE11 中不起作用;
  7. linear-gradient(top, #FF0000, #FFFF00)不适用于任何浏览器;
  8. 并且linear-gradient(to bottom, #FF0000, #FFFF00)适用于所有浏览器。

因此,考虑到前缀梯度的混乱,我强烈建议不要一直依赖前缀实现来像标准一样工作。即使一个浏览器在实现变得稳定后重新实现前缀作为该功能的无前缀版本的别名,也不是所有的浏览器都可以这样做。

话虽如此,很可能所有浏览器都将其前缀-*-animation-*-transition属性别名为无前缀的对应项,因此同样有可能的是,前缀属性将自动更新以支持新的计时函数,这是更新其无前缀对应项的副作用。

最新更新