“only”关键字在CSS媒体查询中究竟做什么？ [英] What exactly does the 'only' keyword do in CSS media queries?

问题描述

在 Mozilla有关媒体查询的页面上，它说：

仅关键字隐藏了旧版浏览器中不支持媒体查询的样式表：

 < link rel =stylesheetmedia =only screen and（color）href =example.css/& 
  




>



涉及未知媒体类型的媒体查询总是false。

那么，当设置为屏幕和（颜色）时，如何浏览器不支持媒体查询显示样式表？它不会理解和颜色所以不应该显示它？如果Mozilla是指支持媒体的浏览器，为什么只添加

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

解决方案

如果未知媒体查询总是为false，为什么屏幕和（颜色）样式表，但仅屏幕和（颜色）不是？

c $ c> media 属性用于媒体类型，而不是媒体查询。

旧的浏览器会希望看到一个媒体类型 screen ， print 等），并且不支持媒体查询例如屏幕和（颜色）和（最小设备宽度：800px））。

，旧版浏览器允许将屏幕和（颜色）解释为屏幕媒体类型。仅用前缀 c>可防止这种情况发生。

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

浏览器知道它是否支持特定的doctype是您发送的HTML文档的一部分。如果doctype是允许媒体查询的，那么一个符合的浏览器将处理它（因为它符合）或忽略它（因为它不知道如何处理该doctype，并做最好的努力） p>



您怀疑，不理解它的实现通常不解析它。浏览器应遵循 稳健性原则 ：

$ b

$ b b $ b

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

同样，如果您写一个具有奇怪属性的链接，probaly不会遇到任何不良后果：

 < a href =http://google.comunknown-attribute =foobar> Google< / a> 
  

On Mozilla's page about media queries, it says:

The only keyword hides style sheets from older browsers that don't support media queries:

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

However, further down the page it also says,

Media queries involving unknown media types are always false.

So how can a browser not supporting media queries show the stylesheet when it's set to screen and (color)? It wouldn't understand and color so shouldn't show it? And if Mozilla is referring to browsers with literally zero support for the media attribute, why would adding only stop them from showing the stylesheet?

Can anyone explain the process by which older browsers parse (or don't) the media attribute?

解决方案

If unknown media queries are always false, why does screen and (color) show the stylesheet but only screen and (color) not?

Previously the media attribute was used for media types, rather than media queries. The spec has since extended the use of this attribute to also support media queries.

An older browser would expect to see a media type (e.g. screen, print, etc.), and wouldn't support a media query (e.g. screen and (color) and (min-device-width: 800px)).

Without the "only", an older browser is allowed to interpret screen and (color) as being the screen media type. Prefixing it with only prevents this from happening.

Can anyone explain the process by which older browsers parse (or don't) the media attribute?

The browser knows whether it supports a particular doctype or not, which is part of the HTML document you send. If the doctype is one that permits media queries, then a conforming browser will either handle it (because it conforms) or ignore it (because it doesn't know how to handle that doctype, and makes a best-case effort).

As you suspected, implementations that don't understand it typically don't parse it. Browsers are expected to follow the robustness principle:

Be liberal in what you accept, and conservative in what you send.

Rather than erroring out or doing something obtrusive or unusual, the default is to pretend that the unknown element doesn't exist at all.

Similarly, you probaly wouldn't experience any ill effects if you write a link that has a strange attribute, like:

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

这篇关于“only”关键字在CSS媒体查询中究竟做什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！