时间戳

首页 > 解决方案 > @supports 规则如何支持此语句中的动画名称？

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

问题描述

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

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

我理解这支持规则：

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

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

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

这是有关动画名称的文档。在定义关键帧时定义动画名称。那么它只是说：“当有人定义了一个名为 foo 的关键帧规则时启用此查询”？这并不意味着是否“支持”名为“foo”的动画，而是是否存在名为“foo”的动画。

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

标签： htmlcssw3cfeature-detection

解决方案

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

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

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

animation-name取一个名为的值<keyframes-name>，并根据我们拥有的规范：

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

和

一些属性接受任意作者定义的标识符作为组件值。这种通用数据类型由 表示<custom-ident>，并表示不会被误解为 ... ref中的预定义关键字的任何有效 CSS 标识符

字符串由由双引号或单引号分隔的字符序列表示并由其组成。参考

该属性可以采用无限数量的值，并且您必须使用有效的值，因此任何字符串都可以完成这项工作（如foo）。由于没有基于所使用的值的支持，因此所有这些都将具有相同的支持；这就是为什么使用随机字符串来测试对animation-name.

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

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

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

与使用无效值进行显示相同：

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

同样的逻辑适用于transition-property; 可以采用<custom-indent>as 值。

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

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

推荐阅读