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

Question

@support 规则允许对 CSS 属性进行特性查询。我想知道是否可以对特定的@media 规则进行功能检查？

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

@supports @media (pointer:fine) {

或者

@supports @media (pointer) {

这似乎不起作用。它应该工作吗？

编辑：这不是引用问题的重复。也许我应该澄清这个问题以解释为什么这是一个不同的问题，所以这里是：

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

Answer 1

这似乎不起作用。它应该工作吗？

没有； @supports 仅支持属性声明，不支持规则或 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 中删除了not 需要媒体类型的限制，因此否定确实应该是not (pointer)，但no browser supports this yet 和媒体类型仍然是必需的。）

无法识别pointer 媒体功能的浏览器会将@media 规则解释为@media not all, not all（尽管not all and (pointer) 媒体查询中有not）。见section 3.2 of the spec，上面写着

未知的 或 ，或不允许的 ，会导致值“未知”。值为“unknown”的 必须替换为 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.