嵌套 CSS @supports 和 @media 查询

Question

我一直试图弄清楚是否可以嵌套 CSS 功能查询（也称为“CSS @supports”）和常规媒体查询，以及正确的做法。

示例 A 显示了媒体查询中的功能查询。
示例 B 显示了 em>媒体查询在功能查询中。

甚至可以嵌套它们吗？如果是这样，是否有首选的嵌套样式？ 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

根据section 3 of the spec，这两个示例都是有效的CSS，并且目前它们似乎一直受到理解@supports 规则和嵌套@media 规则(also new to CSS3) 的浏览器的支持。

虽然这两个示例仅在满足@media 和@supports 条件时应用background: blue 声明，

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

由于您的两个示例意味着微妙的不同事物，您选择哪一个将取决于您的用例：

• 如果您不希望不支持@supports 或flex-wrap: wrap 的浏览器看到任何一个 声明，而是始终应用​​background: red，请选择B。
• 否则，如果您希望任何浏览器（无论如何都可以理解媒体查询）在指定的视口宽度上应用background: green，即使由于不支持@supports 或flex-wrap: wrap 而永远不会应用background: blue，请选择答：