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

Question

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

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

@supports @media (pointer:fine) {

要么

@supports @media (pointer) {

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

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

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

Answer 1

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

没有; @supports仅支持属性声明,而不支持CSS中的at-rules或任何其他语法结构.@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),但是目前还没有浏览器支持这种情况,仍然需要媒体类型.)

不承认浏览器pointer的媒体功能将解释@media规则的@media not all, not all(尽管在not在not all and (pointer)媒体查询).请参阅该规范的第3.2节,其中说:

未知的<mf-name>或<mf-value>或不允许的<mf-value>会导致值"unknown".必须使用not all替换值为"unknown"的<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.