使用@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年前的浏览器行为一致，所以这是你完全可以依赖的东西。