Question

在Mozilla's page about media queries上，它说：

only关键字隐藏了不支持媒体查询的旧浏览器中的样式表：
<link rel="stylesheet" media="only screen and (color)" href="example.css" />

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

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

那么，当设置为screen and (color)时，不支持媒体查询的浏览器如何显示样式表？它不会理解and color所以不应该显示它？如果Mozilla指的是对media属性几乎不支持的浏览器，为什么添加only会阻止它们显示样式表？

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

Answer 1

如果未知媒体查询始终为false，为什么screen and (color)会显示样式表，only screen and (color)为什么？

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

较旧的浏览器会看到媒体类型（例如screen，print等），并且不支持媒体查询< / em>（例如screen and (color) and (min-device-width: 800px)）。

如果没有“仅”，则允许较旧的浏览器将screen and (color)解释为screen媒体类型。用only作为前缀可以防止这种情况发生。

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

浏览器知道它是否支持特定的doctype，这是您发送的HTML文档的一部分。如果doctype是允许媒体查询的文档类型，那么符合标准的浏览器将处理它（因为它符合）或忽略它（因为它不知道如何处理该文档类型，并做出最佳案例的努力）。 p>
如您所料，不理解它的实现通常不解析它。浏览器应遵循robustness principle：

在接受的内容中保持自由，在发送内容时要保守。

默认情况下，假设未知元素根本不存在，而不是出错或做出突兀或不寻常的事情。

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

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

Answer 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

基本上，他们忽略了第一个空格后的所有内容，但将剩余部分视为有效。

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

2 个答案: