Что именно делает ключевое слово "только" в запросах на CSS-носители?

В странице Mozilla о медиа-запросах говорится:

Ключевое слово only скрывает таблицы стилей из старых браузеров, которые не поддерживают медиа-запросы:
<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Однако, далее на странице, где она также написана,

Запросы к мультимедиа с неизвестными типами носителей всегда ложны.

Итак, как браузер, не поддерживающий мультимедийные запросы, показывает таблицу стилей, когда она установлена на screen and (color)? Он не понимал бы and color, так что не должен его показывать? И если Mozilla ссылается на браузеры с буквально нулевой поддержкой атрибута media, почему добавление only не позволяет отображать таблицу стилей?

Может ли кто-нибудь объяснить процесс, с помощью которого старые браузеры анализируют (или не поддерживают) атрибут мультимедиа?

Ответ 1

Если неизвестные медиа-запросы всегда ложны, почему screen and (color) показывает таблицу стилей, но only screen and (color) не?

Ранее атрибут media использовался для типов носителей, а не для медиа-запросов. С тех пор спецификация расширила использование этого атрибута, чтобы также поддерживать медиа-запросы.

В более раннем браузере ожидается вид медиа-типа (например, screen, print и т.д.) и не будет поддерживать медиа-запрос (например, screen and (color) and (min-device-width: 800px)).

Без "единственного" более старый браузер может интерпретировать screen and (color) как тип носителя screen. Префикс с only предотвращает это.

Может ли кто-нибудь объяснить процесс, с помощью которого старые браузеры анализируют (или не поддерживают) атрибут мультимедиа?

Браузер знает, поддерживает ли он определенный тип doctype или нет, который является частью отправляемого вами документа HTML. Если doctype - это тот, который разрешает медиа-запросы, то соответствующий браузер будет либо обрабатывать его (потому что он соответствует), либо игнорировать его (потому что он не знает, как обрабатывать этот тип документа, и делает наилучшие усилия).

Как вы подозревали, реализации, которые его не понимают, обычно не анализируют. Ожидается, что браузеры следуют принципу надежности:

Будьте либеральными в том, что вы принимаете, и консервативны в том, что вы отправляете.

Вместо того, чтобы выходить из строя или делать что-то навязчивое или необычное, по умолчанию подразумевается, что неизвестный элемент вообще не существует.

Аналогично, вы, вероятно, не испытаете каких-либо негативных последствий, если напишите ссылку, которая имеет странный атрибут, например:

<a href="http://google.com" unknown-attribute="foobar">Google</a>

Ответ 2

Я предполагаю, что некоторые браузеры pre-CSS3, которые понимают только типы медиа, интерпретируют

media="screen and (color)"
media="screen" // `screen` is a known media type; ACCEPT for screen media

и

media="only screen and (color)"
media="only"    // `only` is an unknown media type
media="unknown" // REJECT for any media

По сути, они игнорируют все после первого пространства, но обрабатывают остаток как действительный.