当没有前缀的父级更新时,供应商前缀的 CSS 属性会更新吗?
Do vendor-prefixed CSS properties get updated when non-prefixed parent gets updated?
我最近重新阅读了 W3C CSS 计时函数 module when I noticed that the definition of a single-timing-function has been updated to include the frames()
timing function (see this 部分):
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>
我想看看 frames()
当前在使用 animation
属性 时是否有效,但似乎我使用的浏览器目前不支持此功能(但 cubic-bezier()
如图所示 here 当然对 -moz-animation
有效,如 fiddle 所示)。
当前支持的供应商前缀属性(例如 -moz-animation
,如上述 JSFiddle 中所示)是否已更新以支持父项(无前缀)中的更改 属性?也就是说,当例如frames()
受 animation
属性 的浏览器支持,例如-moz/-webkit-animation
属性,或者这不能被概括吗?(即取决于)
大多数带有供应商前缀的功能似乎都已更新以匹配标准化实现,因为通常在后者投入生产时,前缀会重新实现为无前缀对应项的别名。但我认为这不能一概而论——好吧,我想我只是这样做了,所以我要说的是,这不能被依赖。渐变是一个众所周知的前缀特征未更新以符合最新标准的例子。
实际上,该声明甚至不是 100% 正确 — 因为 Mozilla did 实际上更新了他们的 -moz-linear-gradient()
函数以接受相同的 to <side-or-corner>
语法使用旧的 <side-or-corner>
语法 (both of which have completely opposite meanings),而基于 WebKit 的浏览器以及 IE11 仍然不接受新的 to <side-or-corner>
语法用于它们的 -webkit-linear-gradient()
和 -ms-linear-gradient()
功能(并且 -ms-linear-gradient()
完全从 Microsoft Edge 中消失了)。
但是每个浏览器都正确地实现了线性渐变的标准化语法:指定 <side-or-corner>
关键字时需要 to
关键字;在 linear-gradient()
表达式中使用不带 to
的关键字在每个浏览器中都是无效的。
换句话说:
-moz-linear-gradient(top, #FF0000, #FFFF00)
适用于 Firefox;
- 和
-moz-linear-gradient(to bottom, #FF0000, #FFFF00)
也适用于 Firefox;
-webkit-linear-gradient(top, #FF0000, #FFFF00)
适用于 Safari 并且 Chrome;
- 但
-webkit-linear-gradient(to bottom, #FF0000, #FFFF00)
在 Safari 或 Chrome 中不起作用;
-ms-linear-gradient(top, #FF0000, #FFFF00)
适用于 IE10 和 IE11;
- 但
-ms-linear-gradient(to bottom, #FF0000, #FFFF00)
在 IE10 和 IE11 中不起作用;
linear-gradient(top, #FF0000, #FFFF00)
不适用于任何浏览器;
- 和
linear-gradient(to bottom, #FF0000, #FFFF00)
适用于所有浏览器。
因此,鉴于前缀渐变的混乱,我强烈建议不要依赖前缀实现一直像标准一样工作。即使某个浏览器在实现稳定后将前缀重新实现为该功能的无前缀版本的别名,也并非所有浏览器都可以这样做。
话虽如此,很可能所有浏览器都将其带前缀的 -*-animation
和 -*-transition
属性别名化为其无前缀的对应属性,因此同样有可能自动更新带前缀的属性以支持新的计时函数作为其未加前缀的对应项更新后的副作用。
我最近重新阅读了 W3C CSS 计时函数 module when I noticed that the definition of a single-timing-function has been updated to include the frames()
timing function (see this 部分):
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>
我想看看 frames()
当前在使用 animation
属性 时是否有效,但似乎我使用的浏览器目前不支持此功能(但 cubic-bezier()
如图所示 here 当然对 -moz-animation
有效,如 fiddle 所示)。
当前支持的供应商前缀属性(例如 -moz-animation
,如上述 JSFiddle 中所示)是否已更新以支持父项(无前缀)中的更改 属性?也就是说,当例如frames()
受 animation
属性 的浏览器支持,例如-moz/-webkit-animation
属性,或者这不能被概括吗?(即取决于)
大多数带有供应商前缀的功能似乎都已更新以匹配标准化实现,因为通常在后者投入生产时,前缀会重新实现为无前缀对应项的别名。但我认为这不能一概而论——好吧,我想我只是这样做了,所以我要说的是,这不能被依赖。渐变是一个众所周知的前缀特征未更新以符合最新标准的例子。
实际上,该声明甚至不是 100% 正确 — 因为 Mozilla did 实际上更新了他们的 -moz-linear-gradient()
函数以接受相同的 to <side-or-corner>
语法使用旧的 <side-or-corner>
语法 (both of which have completely opposite meanings),而基于 WebKit 的浏览器以及 IE11 仍然不接受新的 to <side-or-corner>
语法用于它们的 -webkit-linear-gradient()
和 -ms-linear-gradient()
功能(并且 -ms-linear-gradient()
完全从 Microsoft Edge 中消失了)。
但是每个浏览器都正确地实现了线性渐变的标准化语法:指定 <side-or-corner>
关键字时需要 to
关键字;在 linear-gradient()
表达式中使用不带 to
的关键字在每个浏览器中都是无效的。
换句话说:
-moz-linear-gradient(top, #FF0000, #FFFF00)
适用于 Firefox;- 和
-moz-linear-gradient(to bottom, #FF0000, #FFFF00)
也适用于 Firefox; -webkit-linear-gradient(top, #FF0000, #FFFF00)
适用于 Safari 并且 Chrome;- 但
-webkit-linear-gradient(to bottom, #FF0000, #FFFF00)
在 Safari 或 Chrome 中不起作用; -ms-linear-gradient(top, #FF0000, #FFFF00)
适用于 IE10 和 IE11;- 但
-ms-linear-gradient(to bottom, #FF0000, #FFFF00)
在 IE10 和 IE11 中不起作用; linear-gradient(top, #FF0000, #FFFF00)
不适用于任何浏览器;- 和
linear-gradient(to bottom, #FF0000, #FFFF00)
适用于所有浏览器。
因此,鉴于前缀渐变的混乱,我强烈建议不要依赖前缀实现一直像标准一样工作。即使某个浏览器在实现稳定后将前缀重新实现为该功能的无前缀版本的别名,也并非所有浏览器都可以这样做。
话虽如此,很可能所有浏览器都将其带前缀的 -*-animation
和 -*-transition
属性别名化为其无前缀的对应属性,因此同样有可能自动更新带前缀的属性以支持新的计时函数作为其未加前缀的对应项更新后的副作用。