混合@supports和@media查询

Question

我想将一系列样式应用于符合两个标准的浏览器：

1. 不是Internet Explorer。
2. 至少1400px。

我可以单独处理每个：

@supports(not (-ms-high-contrast:active))
@media(min-width: 1400px)

我想做这样的事情：

@media(min-width: 1400px) and @supports(not(-ms-high-contrast:active))

CSS是否以某种方式允许这样做？

我注意到这可以通过nesting directives完成，但我希望找到更清晰，更易读的解决方案。

Answer 1

@media，@supports和@keyframes等规则是cannot be grouped together by their at-keywords的单独规则。也就是说，用一对花括号编写单个规则是不可能的，这些花括号结合了两个不同的at关键字，就像你想要做的那样。所以，不幸的是，嵌套是你唯一的选择。

你能做的最好的事情是在同一行写下两个陈述 - 以及它们的开/关括号：

@supports not (-ms-high-contrast: active) { @media (min-width: 1400px) {
}}

这基本上是嵌套它们，如链接问题所示，减去多余的换行符和缩进。