css - 为什么要使用隐含的媒体查询类型 "all"？

Question

我最近注意到我在每个 @media 查询规则中都使用了 all，但我不明白为什么要这样做。

我在网络上进行了搜索，发现网络上的大多数 @media 规则示例都使用类似这样的格式 @media all 和(一些其他条件...)，为什么在没有指定媒体类型的情况下已经隐含了媒体类型 all ？ 这可能是一些较旧的浏览器兼容性问题吗？

我想我真正要问的是，为什么在不需要时使用媒体类型all是常见的做法？

Answer 1

如 Media Queries W3C Recommendation 中所述:

‘all’ is used to indicate that the style sheet applies to all media types.

...

A shorthand syntax is offered for media queries that apply to all media types; the keyword ‘all’ can be left out (along with the trailing ‘and’). I.e. if the media type is not explicitly given it is ‘all’.

在第一个引用的句子中使用单词来指示对我来说听起来就像全部本身可以纯粹用于演示目的。

但是，有一些部分 all 用于特定目的。在 section 3.1该文件提到:

Unknown media features. User agents are to represent a media query as "not all" when one of the specified media features is not known.

Unknown media feature values. As with unknown media features, user agents are to represent a media query as "not all" when one of the specified media feature values is not known.

格式错误的媒体查询也默认为并非全部。

另一个例子，正如 BoltClock 在 his comment 中提到的那样问题是使用only all。关键字 only 用于对旧用户代理隐藏样式表。我们可以使用以下 CSS 进行测试:

body {
    background: red;
}

@media only all {
    body {
        background: green;
    }
}

如果我们在现代浏览器中打开它，文档的正文将具有绿色背景。如果我们在较旧的浏览器(例如 IE8)中打开它，文档的 body 将具有红色背景。

JSFiddle demo .