@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削除しMQ3からメディアタイプを必要とnotの制限なので、否定は本当にnot (pointer)あるべき、しかしno browser supports this yetとメディアタイプがまだ必要です。）を認識しない

ブラウザのメディア機能では、のルールはと解釈されます（not all and (pointer)メディアクエリのnotにもかかわらず）。値が「不明」の結果、>>

不明< MF-名>または< MF-値を言うこれ、section 3.2 of the spec参照、または< 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.