嵌套 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

根据 section 3 of the spec, and for the time being they seem to be consistently supported by browsers that understand both @supports rules and nested @media rules (also new to CSS3)，两个示例都是有效的 CSS。

虽然这两个示例仅在 @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，即使它永远不会应用 background: blue 因为不支持 [=10] =]或flex-wrap: wrap，选择A.

嵌套 CSS @supports 和 @media 查询

Nesting CSS @supports and @media queries

css

feature-detection

media-queries