混合@supports和@media查询 [英] Mixing @supports and @media queries

问题描述

我想对满足两个条件的浏览器应用一系列样式:

I'd like to apply a series of styles to browsers that meet two criteria:

1. 不是Internet Explorer.
2. 至少为1400像素.

每个人我都可以处理:

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

我还是想做这样的事情:

I'd like to do something like this though:

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

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

Does CSS allow for this in some way?

我注意到，这可以通过嵌套指令完成，但我希望找到一个更清洁，更易读的解决方案.

I've noticed that this can be done by nesting directives, but I'm hoping to find a cleaner and more readable solution.

推荐答案

诸如@media，@supports和@keyframes之类的规则是

At-rules such as @media, @supports and @keyframes are separate rules that cannot be grouped together by their at-keywords. That is, it's not possible to write a single rule with a single pair of curly braces that combines two different at-keywords as you are trying to do. So, unfortunately, nesting is your only option here.

您能做的最好的事情就是在同一行上写两个语句以及它们的大括号.

The best you can do is write both statements — and their opening/closing braces — on the same lines:

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

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

This is basically nesting them as shown in the linked question, minus the excess line breaks and indentation.

这篇关于混合@supports和@media查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！