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

Posted 2023-05-08

【中文标题】是否可以对 @media 规则进行 CSS @supports 检查？

【英文标题】：Is it possible to do a CSS @supports check on a @media rule?

【发布时间】：2017-10-29 20:45:35

【问题描述】：

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

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

@supports @media (pointer:fine) 

或者

@supports @media (pointer) 

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

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

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

【问题讨论】：

tl;dr 您需要将媒体查询嵌套在 @supports 括号内。

我不确定，但您是否尝试过嵌套 codepen.io/anon/pen/mmYNgp 之类的内容？

@tylerh：问题是如何？

@MichaelCoker：谢谢，我为你的起点创建了一个fork：codepen.io/fchristant/pen/BRgoKN它基本上证明了这种方法行不通。它不会检测到嵌套在@media 中的规则，但在没有嵌套的情况下，它本身就可以工作。所以我的问题仍然存在。

【参考方案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.

【讨论】：

谢谢，这正是我想要的！为了完整起见，我确实有一个后续问题：您的示例中的语法是什么来做相反的事情？检查浏览器是否不支持指针？

@Ferdy：在这种情况下，级联将成为您的朋友。我已经用一个例子更新了我的答案。

我看到它实时发生，你很快。谢谢！

这简直太美了！为了完成指针值的答案：@media not all and ( pointer: fine ), ( pointer: fine )