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

Question

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

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

我理解这个支持规则:

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

意思是:如果浏览器支持“网格”显示类型，则应用此规则。但我不明白的是第一个例子说的是 animation-name: foo。

对我来说，这意味着:如果浏览器支持名称为“foo”的动画，则应用此规则。我以为 您(开发人员)定义了动画。这只是一个坏例子吗？

这是关于 animation-name 的文档.您在定义关键帧时定义动画名称。那么它只是说:“当有人定义了一个名为 foo 的关键帧规则时启用此查询”？这并不意味着是否“支持”名为“foo”的动画，而是是否存在名为“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 )。由于没有基于使用值(value)的支持，因此所有人都将获得平等的支持；这就是为什么使用随机字符串可以测试 animation-name 的支持的原因.

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

如果您尝试为 animation-name 使用无效值，它不会工作:

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

与使用无效值显示相同:

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

---

同样的逻辑适用于 transition-property ;可以采取 <custom-indent>作为值(value)。

---

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

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