我一直试图弄清楚是否可以嵌套CSS特征查询(也称为“CSS @supports”)和常规媒体查询,以及这样做的正确方法.
示例A显示了媒体查询中的功能查询.
示例B显示了要素查询中的媒体查询.
它甚至可以嵌套它们吗？如果是这样,是否有一种首选的嵌套方式？ A还是B？
- .foo {
- background: red;
- }
- /* EXAMPLE A */
- @media (min-width: 50em) {
- .foo {
- background: green;
- }
- @supports (flex-wrap: wrap) {
- .foo {
- background: blue;
- }
- }
- }
- /* EXAMPLE B */
- @supports (flex-wrap: wrap) {
- .foo {
- background: green;
- }
- @media (min-width: 50em) {
- .foo {
- background: blue;
- }
- }
- }
解决方法
根据
section 3 of the spec,这两个示例都是有效的CSS,目前它们似乎一直受到了解@supports规则和嵌套@media规则(
also new to CSS3)的浏览器的一致支持.
虽然这两个示例仅在满足@media和@supports条件时才应用background：blue声明,
>当且仅当满足(min-width：50em)媒体查询时,A将应用背景：绿色或背景：蓝色;
当且仅当浏览器理解@supports并支持flex-wrap：wrap时,B才会应用任一声明.
由于您的两个示例意味着微妙的不同,您选择哪一个将取决于您的用例：
>如果您不希望浏览器不支持@supports或flex-wrap：wrap来查看声明,而是始终应用background：red,请选择B.>否则,如果您希望任何浏览器(无论如何都能理解媒体查询)在指定的视口宽度应用background：green,即使它永远不会应用background：blue,因为不支持@supports或flex-wrap：wrap,请选择A .
