css - 嵌套 CSS @supports 和 @media 查询

Question

我一直在尝试弄清楚是否可以嵌套 CSS 功能查询(也称为“CSS @supports”)和常规媒体查询，以及这样做的正确方法是什么.

示例 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)的浏览器的支持。

尽管当 both @media 和 @supports 时，这两个示例只会应用 background: blue 声明满足条件，

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

由于您的两个示例的含义略有不同，因此您选择哪一个将取决于您的用例:

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