Вложенные правила @media в CSS

Ответ 1

Короткий ответ заключается в том, что, если в CSS3 разрешено вложение @media правил (а не только медиа-запросов), это не было "t разрешено в CSS2.1, главным образом потому, что не было причин позволять ему видеть, поскольку медиа-запросы еще не существовали.

Firefox первым поддержал вложенные правила @media, однако со времени, когда этот ответ был впервые опубликован, другие браузеры медленно догнали. А именно, Chrome (и аналогично Blink Opera) был обновлен для его поддержки.

Насколько мне известно, Safari и IE до сих пор не поддерживают его.

Там немного путаницы терминологии, которая нуждается в очистке, чтобы мы могли понять, что именно происходит.

В коде, который вы ссылаетесь на правила @media и не столько на медиа-запросы - сам мультимедийный запрос является компонентом, который следует за токеном @media, тогда как правило представляет собой весь блок кода, состоящий из @media, медиа-запрос и правила, вложенные в его набор фигурных скобок.

Это может вызвать путаницу среди многих, когда дело доходит до использования медиа-запросов в CSS, а также для вашего конкретного случая, когда правило @media в импортированной таблице стилей работает корректно, даже если @import сопровождается другим медиа-запросом. Обратите внимание, что медиа-запросы могут встречаться как в правилах @media, так и @import. Это одно и то же, но они используются для ограничения правил стиля по-разному.

Теперь актуальная проблема заключается в том, что вложенные правила @media недействительны в CSS2.1, потому что вам не разрешено встраивать любые правила at в правилах @media. Однако в CSS3 все выглядит совсем по-другому. А именно, модуль условных правил четко говорит о том, что правила @media могут быть вложенными, даже предоставляя пример:

Например, с помощью этого набора вложенных правил:

@media print { // rule (1)
  #navigation { display: none }
  @media (max-width: 12cm) { // rule (2)
    .note { float: none }
  }
}

условие правила, помеченного (1), истинно для печатного носителя, а условие правила, отмеченного (2), истинно, когда ширина области отображения (которая для печатного носителя является полем страницы) меньше, чем или равна 12 см. Таким образом, правило "#navigation {display: none) применяется всякий раз, когда эта таблица стилей применяется к печатным носителям, а правило".note {float: none} применяется только тогда, когда таблица стилей применяется к печатным материалам и ширине страница меньше или равна 12 сантиметрам.

Кроме того, похоже, что Firefox выполняет эту спецификацию и обрабатывает правила соответственно, тогда как другие браузеры все еще рассматривают ее как способ CSS2.1.

Грамматика в Синтаксическом модуле не была обновлена, чтобы отразить это; он по-прежнему запрещает вложение правил at в правилах @media, как в CSS2.1. В любом случае эта спецификация предназначена для перезаписи, поэтому я думаю, это не имеет значения.

В принципе, CSS3 позволяет это (в ожидании перезаписи модуля синтаксиса), но не CSS2.1 (поскольку он не определяет медиа-запросы и не допускает вложенные блоки правил @media). И хотя по крайней мере один браузер начал поддерживать новую спецификацию, я бы не назвал другие браузеры ошибками; вместо этого я скажу, что они просто еще не догнали, поскольку они действительно соответствуют более старой, более стабильной спецификации.

Наконец, причина, по которой работает ваш @import, заключается в том, что @import может работать условно с помощью медиа-запроса. Однако это не имеет отношения к правилу @media в импортированной таблице стилей. Это на самом деле две отдельные вещи и рассматриваются как таковые всеми браузерами.

Чтобы ваш код работал последовательно в браузерах, вы можете либо использовать инструкцию @import, либо, поскольку оба правила используют min-width, просто удалите вложенные правила @media:

@media screen and (min-width: 480px) {
    body {
        background-color: #6aa6cc;
        color: #000;
    }
}

@media screen and (min-width: 768px) {
    body {
        background-color: #000;
        color: #fff;
    }
}