是否可以对@media规则进行CSS @supports检查? [英] Is it possible to do a CSS @supports check on a @media rule?

问题描述

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

The @support rule allows one to do a feature query on CSS properties. I am wondering whether it is possible to do a feature check on specifically @media rules?

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

For example, I like to know if the browser supports the @media pointer or any-pointer condition:

@supports @media (pointer:fine) {

或

@supports @media (pointer) {

这似乎不起作用.应该行吗?

This does not seem to work. Should it work?

编辑:这不是所引用问题的重复项.也许我应该澄清这个问题，以解释为什么这是一个不同的问题，所以去吧:

Edit: This is not a duplicate of the referenced question. Perhaps I should clarify the question to explain why this is a different question, so here goes:

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

I do not want to nest @supports inside @media or vice versa. I want to feature detect whether the @media query itself is supported, in particular the @media rule for pointer. This is a completely different scenario from just nesting a random support query inside a media query.

推荐答案

这似乎不起作用.应该可以吗?

This does not seem to work. Should it work?

否； @supports仅支持属性声明，不支持规则或CSS中的任何其他语法构造.无论如何，您都不希望检查是否支持@media规则.您正在尝试检查对特定媒体功能的支持.但是，即使媒体功能与属性声明共享相同的声明语法，@supports也不支持.

No; @supports only supports property declarations, not at-rules or indeed any other grammatical construct in CSS. You're not looking to check for support for the @media rule anyway; you're trying to check for support for specific media features. But @supports doesn't support that either, even though media features share the same declaration syntax with property declarations.

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

To that end, you don't need the @supports rule at all. To check if a browser supports a certain media feature, simply write a @media rule with a media query list containing both the media feature and its negation:

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

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

(请注意，Media Queries 4取消了对not的限制，该限制要求MQ3中需要一种媒体类型，因此，否定确实应为not (pointer)，但

(Note that Media Queries 4 removes the restriction of not requiring a media type from MQ3, so the negation really ought to be not (pointer), but no browser supports this yet and a media type is still required.)

无法识别pointer媒体功能的浏览器会将@media规则解释为@media not all, not all(尽管在not all and (pointer)媒体查询中为not).请参见规范的第3.2节，其中

Browsers that don't recognize the pointer media feature will interpret the @media rule as @media not all, not all (in spite of the not in the not all and (pointer) media query). See section 3.2 of the spec, which says

未知的或或不允许的< mf-value>导致值未知".值未知"的< media-query>不能全部替换.

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，则这些错误处理规则意味着您需要利用级联(如果您不知道，则不知道)原始值可能会被卡住):

If you need to apply CSS for when a browser does not support a media feature, these error handling rules mean you'll need to take advantage of the cascade (and if you don't know the original values in advance, you may be stuck):

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.

这篇关于是否可以对@media规则进行CSS @supports检查?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！