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，这两个示例都是有效的CSS，目前它们似乎始终受到了解@supports规则和嵌套@media规则（{{3}的浏览器的支持}}）。

虽然两个示例仅在{em> 符合background: blue和@media条件时才会应用@supports声明，

当且仅当符合background: green媒体查询时，A才会应用background: blue或(min-width: 50em);

@supports

flex-wrap: wrap

B才会应用任一声明。

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

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

嵌套CSS @supports和@media查询

1 个答案: