嵌套CSS @supports和@media查询

Question

我一直试图弄清楚是否有可能嵌套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;
        }
    }
}

Answer 1

根据规范的第3部分,这两个示例都是有效的CSS ,目前它们似乎一直受到了解@supports规则和嵌套@media规则的浏览器的支持(对于CSS3也是新的).

虽然这两个例子仅适用background: blue时声明都将@media与@supports被满足的条件,

• A将适用于background: green或background: blue当且仅当满足(min-width: 50em)媒体查询时;
• 当且仅当浏览器理解@supports并支持时,B才会应用任一声明flex-wrap: wrap.

由于你的两个例子意味着微妙的不同,你选择哪一个将取决于你的用例:

• 如果您不希望浏览器不支持@supports或flex-wrap: wrap查看任何声明,而是始终应用background: red,请选择B.
• 否则,如果您想要的任何浏览器(能理解媒体查询反正)申请background: green在指定的视口的宽度,即使它永远不会适用background: blue,由于不支持@supports或者flex-wrap: wrap,选A.