'only'关键字在CSS媒体查询中的作用究竟是什么？

Question

在Mozilla的媒体查询页面上,它说:

该only关键字隐藏了不支持媒体查询的旧浏览器中的样式表:

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

然而,在页面的下方,它也说,

涉及未知媒体类型的媒体查询始终为假.

那么不支持媒体查询的浏览器如何在设置时显示样式表screen and (color)？它不明白and color所以不应该表现出来吗？如果Mozilla指的是对该media属性几乎没有支持的浏览器,那么为什么要添加only阻止它们显示样式表？

任何人都可以解释旧浏览器解析(或不解析)媒体属性的过程吗？

Answer 1

如果未知媒体查询总是错误,为什么要screen and (color)显示样式表而only screen and (color)不是？

以前,该media属性用于媒体类型,而不是媒体查询.此后,规范扩展了此属性的使用,以支持媒体查询.

旧的浏览器希望看到一个媒体类型(例如screen,print等),而不会支持媒体查询(例如screen and (color) and (min-device-width: 800px)).

如果没有"only",则允许较旧的浏览器将其解释screen and (color)为screen媒体类型.对其进行前缀可以only防止这种情况发生.

任何人都可以解释旧浏览器解析(或不解析)媒体属性的过程吗？

浏览器知道它是否支持特定的doctype,这是您发送的HTML文档的一部分.如果doctype是允许媒体查询的文档类型,那么符合标准的浏览器将处理它(因为它符合)或忽略它(因为它不知道如何处理该doctype,并做出最好的案例努力).

如您所料,不理解它的实现通常不会解析它.浏览器应遵循稳健性原则:

你所接受的是自由的,你所发送的是保守的.

而不是错误地或做出突兀或不寻常的事情,默认是假装根本不存在未知元素.

同样,如果你编写一个具有奇怪属性的链接,你可能不会遇到任何不良影响,例如:

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