是否可以對@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.