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;
        }
    }
}

- oelna

---

在CSS3中，嵌套媒体查询是被允许的。因此我认为功能查询也可能会起作用。但是获得跨浏览器兼容性是另一回事。 - elysian-design

@BoltClock 谢谢！至少现在我知道我们将来可能会得到这个。我想我又要像1999年一样测试浏览器支持了。 - oelna

算了，如果你只关心支持@supports的浏览器，那么浏览器支持似乎很好。我会发布一个答案。 - BoltClock

Answer 1

两个例子都是有效的CSS，符合规范第3节，并且目前它们似乎被同时理解@supports规则和嵌套@media规则（也是CSS3的新功能）的浏览器一致支持。

尽管两个例子只在满足@media和@supports条件时应用background: blue声明，

A将仅在满足(min-width: 50em)媒体查询时应用background: green或background: blue；

B将仅在浏览器理解@supports并支持flex-wrap: wrap时应用任一声明。

由于您的两个示例意思略有不同，因此您选择哪一个将取决于您的用例：

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

- BoltClock

---

Dreamweaver的验证仅支持内部媒体，而不支持媒体内部支持，但其验证器并不总是好用的。 - Iggy