是否可以对@media规则进行CSS @supports检查？

@support规则允许用户对CSS属性进行功能查询.我想知道是否可以对@media规则进行功能检查？

例如,我想知道浏览器是否支持@media指针或任何指针条件：

@supports @media (pointer:fine) {

要么

@supports @media (pointer) {

这似乎不起作用.应该有用吗？

编辑：这不是引用问题的副本.也许我应该澄清这个问题来解释为什么这是一个不同的问题,所以这里是：

我不想在@media中嵌套@supports,反之亦然.我想要检测是否支持@media查询本身,特别是指针的@media规则.这与在媒体查询中嵌套随机支持查询完全不同.

解决方法

This does not seem to work. Should it work?

没有; @supports只支持属性声明,而不支持at-rules或CSS中的任何其他语法结构.你不打算检查对@media规则的支持;您正在尝试检查特定媒体功能的支持.但@supports也不支持,即使媒体功能与属性声明共享相同的声明语法.

为此,您根本不需要@supports规则.要检查浏览器是否支持某种媒体功能,只需编写一个带有媒体查询列表的@media规则,该列表包含媒体功能及其否定：

@media not all and (pointer),(pointer) {
  p { color: green; }
}

<p>If this text is green,your browser supports the <code>pointer</code> media feature.

(请注意,媒体查询4消除了不需要MQ3中的媒体类型的限制,因此否定实际上不应该是(指针),但仍需要no browser supports this yet和媒体类型.)

不识别指针媒体功能的浏览器会将@media规则解释为@media并非全部,而不是全部(尽管不是非全部和(指针)媒体查询).见section 3.2 of the spec,其中说

An unkNown <mf-name> or <mf-value>,or disallowed <mf-value>,results in the value “unkNown”. A <media-query> whose value is “unkNown” must be replaced with not all.

如果您需要在浏览器不支持媒体功能时应用CSS,这些错误处理规则意味着您需要利用级联(如果您事先不知道原始值,则可能会卡住)：

p { color: red; }

@media not all and (pointer),(pointer) {
  p { color: currentcolor; }
}

<p>If this text is red,your browser does not support the <code>pointer</code> media feature.