使用@media爲css條目分組/創建代碼摺疊時可能會出現任何副作用問題？

Question

在CSS 3語法中，我們使用@media來定義應用屏幕。

我打算將它用作CSS條目的自定義代碼摺疊。

E.g.

@media { 
    div { color: green; } 
} 

所以我不知道在這樣做時是否會產生任何副作用問題？

Answer 1

首先，@media CSS at-rule對於CSS3來說並不新鮮。它是在CSS2中引入的，並且得到了包括IE5 +在內的所有瀏覽器的支持。什麼是新來的CSS3是媒體查詢。媒體查詢與@media之間的區別詳見this answer。

沒有伴隨媒體查詢的@media規則是equivalent to @media all，同樣，每個瀏覽器（包括IE5及更高版本）都可以正確理解該規則。換句話說，就瀏覽器行爲而言，除了隱藏IE4以及90年代後期以來的任何其他瀏覽器（不支持任何形式或形式的@media）的CSS之外，沒有任何副作用。

請注意，此構造不會在Jigsaw CSS validator中驗證爲CSS2或CSS3;這是驗證器的錯誤，這可能是由於CSS2沒有明確允許空的媒體類型與@media。話雖如此，CSS3中陳述的是與17年前的瀏覽器行爲一致，所以這是你完全可以依賴的東西。