嵌套 CSS @supports 和 @media 查询

Posted 2023-03-12

【中文标题】嵌套 CSS @supports 和 @media 查询

【英文标题】：Nesting CSS @supports and @media queries

【发布时间】：2017-07-15 05:57:34

【问题描述】：

我一直试图弄清楚是否可以嵌套 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;
        
    

【问题讨论】：

嵌套媒体查询似乎在 css3 中是允许的。所以我认为，功能查询也可以工作。但获得跨浏览器兼容性是另一回事。

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

从头开始，如果您只对支持 @supports 的浏览器感兴趣，浏览器支持似乎还不错。我会发布一个答案。

【参考方案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，请选择答：

【讨论】：

Dreamweaver 只验证支持内部媒体，而不验证媒体内部支持，但它的验证器并不总是好的。