Смешивание запросов @supports и @media

Question

Я бы хотел применить серию стилей к браузерам, которые отвечают двум критериям:

1. Не являются Internet Explorer.
2. Минимум 1400 пикселей.

По отдельности я могу справиться с каждым:

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

Я хотел бы сделать что-то вроде этого, хотя:

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

Позволяет ли CSS это каким-то образом?

Я заметил, что это можно сделать с помощью вложенных директив , но я надеюсь найти более чистое иболее читаемое решение.

Answer 1

Правила At, такие как @media, @supports и @keyframes, являются отдельными правилами, которые не могут быть сгруппированы по их ключевым словам at .То есть невозможно написать одно правило с одной парой фигурных скобок, которое объединяет два разных ключевых слова at, как вы пытаетесь это сделать.Так что, к сожалению, здесь вы можете использовать только вложенность.

Лучшее, что вы можете сделать, это написать оба утверждения - и их открывающие / закрывающие скобки - в одной строке:

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

Этов основном, вкладывая их, как показано в связанном вопросе, за исключением лишних разрывов строк и отступов.