Смешивание и @supports с помощью запроса @media в CSS ⇐ CSS

[Anonymous]

Я впервые создаю веб-сайт с использованием CSS-сетки. Поскольку не все браузеры поддерживают это, я создал набор резервных стилей и условно применяю те, у которых @supports not (display:grid). Но я также хочу использовать это в качестве таблицы стилей для мобильных устройств и использовать сетки CSS только на больших экранах - этого можно достичь с помощью простого медиа-запроса @media screen и (max-width:700px). Проблема теперь в том, что если что-то из этого верно, то есть если браузер не поддерживает сетку CSS или окно браузера не шире 700 пикселей, я хочу использовать свою резервную таблицу стилей.

Итак, мой вопрос: как мне одновременно запросить у браузера @supports или @media? Вложение их не сработает, поскольку по сути требуется, чтобы они оба были истинными, и кажется неправильным просто скопировать всю таблицу стилей из @supports в @media.

По сути, я хочу что-то вроде этого:

(@supports not (display:grid)) or (@media screen and (max-width:700px)){
/*my stylesheet*/
}


Подробнее здесь: https://stackoverflow.com/questions/505 ... ery-in-css