Mixing @supports and @media queries

问题

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

1. Are not Internet Explorer.
2. Are a minimum of 1400px.

Individually I can handle each:

@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))

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.

回答1:

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.

来源：https://stackoverflow.com/questions/50312450/mixing-supports-and-media-queries