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

Question

На странице Mozilla о медиазапросах , там написано:

Ключевое слово only скрывает таблицы стилей от старых браузеров, которые не поддерживают медиазапросы:

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Однако дальше вниз по странице также написано,

Медиа-запросы с неизвестными типами медиа всегда ложны.

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

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

Answer 1

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

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

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

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

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

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

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

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

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

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

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

Answer 2

Я предполагаю, что определенные браузеры до 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

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