@supports 规则如何支持此语句中的动画名称？

Question

我在 W3C 的一个页面上找到了这个 CSS，我不知道它有什么意义，特别是动画名称部分：

@supports ((transition-property: color) or
           (animation-name: foo)) and
          (transform: rotate(10deg)) {
  // ...
}

我理解这个支持规则：

@supports (display: grid) {
  .main {
    display: grid;
  }
}

表示：如果浏览器支持"grid"显示类型，则应用此规则。但是我不明白的是第一个例子说的是animation-name: foo。

对我来说，这意味着：如果浏览器支持名称为 "foo" 的动画，则应用此规则。我以为 you（开发者）定义了动画。这只是一个坏例子吗？

这是关于 animation-name 的文档。您在定义关键帧时定义动画名称。那么它只是在说："Enable this query when someone has defined a keyframe rule with the name foo"？这意味着不是是否存在名为 "foo" 的动画的 "support"，而是是否存在名为 "foo".

的动画

https://www.w3.org/TR/css3-conditional/#processing

Answer 1

That means if the browser supports an animation with the name "foo" apply this rule. I thought you the developer defined animations. Is it just a bad example?

这不是真正的意思。 display 和 animation-name 之间的区别在于第一个采用一组预定义值中的值，而第二个采用任何有效字符串。

在 the CSS specification 中，您可以找到 display 允许的值的详尽列表。您必须使用有效值，这是合乎逻辑的，并且对不同值的支持是不一样的。

animation-name 取一个名为 <keyframes-name> 的值，从 the specification 我们有：

<keyframes-name> = <custom-ident> | <string>

和

Some properties accept arbitrary author-defined identifiers as a component value. This generic data type is denoted by <custom-ident>, and represents any valid CSS identifier that would not be misinterpreted as a pre-defined keyword in ... ^ref

Strings are denoted by and consist of a sequence of characters delimited by double quotes or single quotes. ^ref

属性可以取无限多个值，您必须使用一个有效的值，因此任何字符串都可以完成这项工作（如 foo）。由于没有基于使用价值的支持，因此所有人都将获得平等的支持；这就是为什么使用随机字符串可以测试 animation-name.

的支持

逻辑同理；你必须使用一个有效的值，然后我们测试这个值的支持。对于 display，您只能使用某些值，并且每个值在浏览器之间都有不同的支持。对于animation-name，你的值没有限制，所有的支持度都一样

如果您尝试为 animation-name 使用无效值，它将不起作用：

@supports (animation-name: a b ) {
  body {
    background:red;
  }
}

与使用无效值显示相同：

@supports (display: 0 ) {
  body {
    background:red;
  }
}

同样的逻辑也适用于transition-property；可以取 <custom-indent> 作为值。

如果您使用 animation-name 的有效值（即使动画不存在）和 transition-property 的有效值（即使属性不存在)，那么它将适用：

@supports ((animation-name: myanimation) and (transition-property:a-random-name)) {
  body {
    background:green;
  }
}

@supports 规则如何支持此语句中的动画名称？

How can an @supports rule support name of animations in this statement?

html

css

w3c

feature-detection