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

Question

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

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

@supports @media (pointer:fine) { 

或者

@supports @media (pointer) { 

这似乎并没有工作。它应该工作吗？

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

我不想在@media中嵌套@supports，反之亦然。我想检测@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去除的not需要从MQ3媒体类型的限制，所以否定真的应该是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，它说

未知< MF-名>或< MF值>，或不允许< MF值>，导致价值“未知”。 A < media-query>的值“未知”必须替换为不全部。

如果您需要申请的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.