【问题标题】:Do vendor-prefixed CSS properties get updated when non-prefixed parent gets updated?更新非前缀父级时,供应商前缀的 CSS 属性是否会更新?
【发布时间】:2017-04-21 16:28:39
【问题描述】:

我最近在重新阅读 W3C CSS Timing Functions module 时注意到单定时函数的定义已更新为包含 frames() 定时函数(请参阅 this 部分):

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

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

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

【问题讨论】:

    标签: css vendor-prefix


    【解决方案1】:

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

    实际上,该语句甚至不是 100% 正确 — 因为 Mozilla 确实 实际上更新了他们的 -moz-linear-gradient() 函数以接受相同的 to &lt;side-or-corner&gt; 语法以及旧的 &lt;side-or-corner&gt; 语法(@ 987654321@),而基于 WebKit 的浏览器以及 IE11 仍然不接受新的 to &lt;side-or-corner&gt; 语法来用于它们的 -webkit-linear-gradient()-ms-linear-gradient() 函数(并且 -ms-linear-gradient() 完全从 Microsoft Edge 中消失了)。

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

    换句话说:

    1. -moz-linear-gradient(top, #FF0000, #FFFF00) 在 Firefox 中工作;
    2. -moz-linear-gradient(to bottom, #FF0000, #FFFF00) 也适用于 Firefox;
    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 属性别名为它们的无前缀对应物,因此前缀属性也很可能会自动更新以支持新的计时功能。他们的无前缀对应物被更新为这样做的效果。

    【讨论】:

    • 很好的例子 - 是的,整个事情都是一团糟。无数其他示例,从媒体查询到 CSS 范围的保留关键字
    猜你喜欢
    • 1970-01-01
    • 2015-01-23
    • 1970-01-01
    • 2014-03-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-25
    • 2013-07-03
    相关资源
    最近更新 更多