媒体查询 第 5 级

1. 引言

本节为非规范性内容。

在 1997 年，HTML4 [HTML401] 定义了一种机制，用于支持依赖于媒体的样式表， 以适配不同的 媒体类型。 例如，一个文档可能为屏幕与打印使用不同的样式表。 在 HTML 中，可以这样写：

<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

CSS 通过其 @media 与 @import 规则适配并扩展了这一功能， 增加了查询单个特性值的能力：

@media screen {
  * { font-family: sans-serif }
}

@import "print-styles.css" print;

媒体查询 可与 HTML、XHTML、XML [xml-stylesheet] 以及 CSS 的 @import 与 @media 规则一起使用。

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

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

<?xml-stylesheet media="screen and (color), projection and (color)"
                 rel="stylesheet" href="example.css" ?>

@import url(example.css) screen and (color), projection and (color);

@media screen and (color), projection and (color) { … }

1.1. 模块交互

本模块扩展并取代 [MEDIAQUERIES-4] 以及其前身 [MEDIAQUERIES-3]， 而它们又是建立在并替代 CSS 2 § 7 媒体类型 之上。

1.2. 值

本规范未定义的值类型，例如 <integer>、<number> 或 <resolution>， 定义于 [CSS-VALUES-4]。 其他 CSS 模块可能会扩展这些值类型的定义。

1.3. 单位

媒体查询中使用的单位与 CSS 的其他部分相同，如 [CSS-VALUES-4] 中所定义。 例如，像素单位表示的是 CSS 像素， 而不是物理像素。

相对长度 单位在媒体查询中是基于 初始值 的， 这意味着单位永远不会基于声明的结果。

注：例如在 HTML 中， em 单位相对于 初始值 的 font-size， 该初始值由用户代理或用户偏好定义， 而不是页面上的任何样式设置。 请注意，这也会考虑用户可能施加的附加限制， 例如最小字体大小。

2. 媒体 查询

一个 媒体查询 是一种用于测试用户代理 或文档所在显示设备某些方面的方法。媒体查询（几乎）总是独立于文档内容、 其样式， 或任何其他内部方面； 除非另一个特性明确指定它会影响媒体查询的解析结果，否则它们只依赖于“外部”信息。

媒体查询 的语法由以下部分组成： 一个可选的 媒体查询修饰符， 一个可选的 媒体类型， 以及零个或多个 媒体特性：

一个 媒体查询 是一个逻辑表达式， 其结果为真或假。 媒体查询为真当且仅当：

• 若指定了 媒体类型， 则它与用户代理运行所在设备的媒体类型匹配，并且

• 媒体条件 为真。

本节中关于媒体查询的陈述假定遵循 语法章节。 不符合语法的媒体查询在 § 3.2 错误处理 中讨论。 即：语法优先于本节中的要求。

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

@import url(example.css) screen and (color);

用户代理必须在其所知的用户环境发生变化时重新求值 媒体 查询， 例如当设备从横向（landscape）切换到纵向（portrait）时， 并相应改变依赖这些 媒体查询 的任何结构的行为。

除非另一个特性明确指定它会影响媒体查询的解析结果，否则不需要为了对表达式求值而应用样式表。

2.1. 组合媒体查询

若干 媒体查询 可以组合成一个以逗号分隔的 媒体查询列表。

媒体查询列表 为真当且仅当其组成部分中的 任意一个 媒体 查询 为真； 并且只有当其组成部分中的 全部 媒体查询 都为假时才为假。

@media screen and (color), projection and (color) { … }

空的 媒体查询列表 求值为真。

@media all { … }
@media { … }

2.2. 媒体查询修饰符

一个 媒体查询 可以选择性地以前缀形式带有一个 媒体查询修饰符， 它是一个单独的关键字，用于改变后续 媒体 查询 的含义。

2.2.1. 否定媒体查询：not 关键字

单个 媒体查询 可以通过在其前添加关键字 not 来对其结果取反。 如果该 媒体查询 正常情况下求值为真， 那么加上 not 前缀会使其求值为假； 反之亦然。

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

2.2.2. 对旧版用户代理隐藏媒体查询：only 关键字

媒体查询 的概念源自 HTML4 [HTML401]。 该规范只定义了 媒体类型， 但具有一种向前兼容的语法，能容纳未来概念（例如 媒体特性）的加入： 它会读取 媒体查询 中直到第一个非字母数字字符之前的所有字符， 并将其解释为一个 媒体类型， 其余部分则被忽略。 例如，媒体查询 screen and (color) 会被截断为仅 screen。

不幸的是，这意味着采用此错误处理行为的旧版用户代理 会忽略 媒体特性 在 媒体查询 中的任何出现， 即便这些特性在查询中远比 媒体类型 更重要。 这可能导致样式在不合适的情形中被意外应用。

为将这些 媒体查询 对旧版用户代理隐藏， 可以在 媒体查询 前加上关键字 only。 only 关键字对 媒体查询 的结果没有影响， 但会导致旧版用户代理将该 媒体查询 解析为指定了未知的 媒体类型 “only”， 从而将其忽略。

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

注：请注意，only 关键字 只能用于 媒体类型 之前。 仅由 媒体特性 构成的 媒体查询， 或带有另一个 媒体查询修饰符（如 not）的查询， 将会被旧版用户代理自动视为假。

注：在发布本规范时， 此类旧版用户代理极其罕见， 因而使用 only 修饰符很少（若有的话）是必要的。

2.3. 媒体类型

媒体类型 是一类宽泛的用户代理设备类别， 文档可以在其上显示。 最初的一组 媒体类型 在 HTML4 中定义， 用于 <link> 元素的 media 属性。

不幸的是，媒体类型 事实证明不足以 区分具有不同样式需求的设备。 一些最初相当不同的类别， 例如 screen 与 handheld， 在其发明后的这些年里已经显著融合。 另一些，例如 tty 或 tv， 暴露了与功能齐全的计算机显示器这一常态相比的有用差异， 因而在理论上可用于用不同样式进行针对性处理； 但由于 媒体类型 的定义是互斥的， 使得以合理方式使用它们变得困难； 相反，它们的排他性方面更适合通过 媒体特性， 例如 grid 或 scan。

因此，以下 媒体类型 被定义用于 媒体 查询：

all

匹配所有设备。

print

匹配打印机，以及旨在复现打印显示的设备， 例如以“打印预览”显示文档的网页浏览器。

screen

匹配所有不被 print 匹配的设备。

此外，还定义了以下已弃用的 媒体类型。 作者不得使用这些 媒体类型； 相反，建议他们选择能更好代表其试图针对进行样式设置的设备方面的、适当的 媒体特性。

用户代理必须将以下 媒体类型 识别为有效， 但必须使它们不匹配任何内容。

• tty
• tv
• projection
• handheld
• braille
• embossed
• aural
• speech

注：预计所有媒体类型也会在未来适时弃用， 因为将会定义出适当的 媒体特性， 用以捕捉其重要差异。

2.4. 媒体特性

媒体特性 是比 媒体类型 更细粒度的测试， 用于测试用户代理或显示设备的一项单独、特定的特性。

从语法上讲，媒体特性 类似于 CSS 属性： 它们由特性名称、冒号，以及要测试的值组成。 它们也可以仅以特性名称书写为布尔形式， 或使用比较运算符以范围形式书写。

不过，属性与媒体特性之间有若干重要差异：

• 属性用于提供关于如何呈现文档的信息。 媒体特性用于描述输出设备的要求。
• 媒体特性总是被括在圆括号中， 并通过 and 或 or 关键字组合， 例如 (color) and (min-width: 600px)， 而不是用分号分隔。
• 媒体特性可以仅给出其名称 （省略冒号与值）， 以在 布尔上下文 中求值该特性。 这是一种便捷的简写形式，适用于那些具有合理的、代表 0 或 “none” 的值的特性。 例如，当 color 媒体特性 非零时， (color) 为真。
• 类型为 “range” 的 媒体特性 可以在 范围上下文 中书写， 其使用标准数学比较运算符而不是冒号； 或者其特性名称可以加上 “min-” 或 “max-” 前缀。
• 属性有时接受复杂值， 例如涉及若干其他值的计算。媒体特性 仅接受单个值：一个关键字、一个数字，等等。

如果某个 媒体特性 引用的概念 在 UA 运行所在设备上并不存在 （例如，语音 UA 没有“宽度（width）”这一概念）， 则该 媒体特性 必须始终求值为假。

<link media="speech and (device-aspect-ratio: 16/9)"
      rel="stylesheet" href="example.css">

2.4.1. 媒体特性类型：“range” 与 “discrete”

每个媒体特性在其定义表中将其“类型”定义为 “range” 或 “discrete”。

“Discrete” 媒体特性， 例如 pointer，其值来自一个集合。 这些值可以是关键字 或布尔数字（0 与 1）， 但共同点在于它们没有内在的“顺序”——这些值彼此之间不存在“更小”或“更大”的关系。

另一方面，“Range” 媒体特性（例如 width）的值来自一个范围。 任意两个值都可以被比较，以确定哪个更小、哪个更大。

这两种类型之间唯一显著的差异在于： 类型为 “range” 的 媒体特性 可以在 范围上下文 中求值， 并且可以在其名称上接受 “min-” 与 “max-” 前缀。 执行其中任一操作都会改变该特性的含义——不再是当特性恰好匹配给定值时为真， 而是在该特性值大于/小于/等于给定值时匹配。

2.4.2. 在布尔上下文中求值媒体特性

虽然 媒体特性 通常具有类似 CSS 属性的语法， 但它们也可以更简单地只写特性名称， 例如 (color)。

当以这种方式书写时，该 媒体 特性 会在 布尔上下文 中被求值。 如果该特性在除以下值之外的任意值下都会为真：数字 0、 值为 0 的 <dimension>、 关键字 none、 或该媒体特性明确定义为在布尔上下文中求值为假的某个值， 则该 媒体特性 求值为真。 否则，求值为假。

2.4.3. 在范围上下文中求值媒体特性

类型为 “range” 的 媒体特性 也可以改写为 范围上下文 形式，利用其值具有顺序这一事实， 使用普通的数学比较运算符：

注：此语法在《媒体查询》第 4 级中是新增的， 因而目前其支持程度不如 min-/max- 前缀那样广泛。

基本形式由特性名称、 比较运算符 以及一个值组成； 当该关系成立时返回真。

其余形式中， 特性名称嵌套在两个值比较之间； 当两次比较都为真时返回真。

一些 “range” 类型的媒体特性被称为 在负值范围内为假。 这意味着负值是有效的且必须被解析，并且 查询该媒体特性是否等于、小于、或小于等于 任意这样的负值时必须求值为假。 查询该媒体特性是否大于、或大于等于某个负值时， 若该关系成立则求值为真。

注：如果在解析阶段就拒绝负值， 那么根据错误处理规则， 它们会被当作 unknown 来处理。 但在现实中， 设备的 resolution 是否为 -300dpi 并非未知， 而是已知为假。 同样地，对于任何视觉设备而言，被目标化的显示区域的 width 已知大于 -200px。 上述规则反映了这一点， 使直觉与 UA 的行为保持一致。

@media not (width <= -100px) {
  body { background: green; }
}

@media (height > -100px) {
  body { background: green; }
}

@media not (resolution: -300dpi) {
  body { background: green; }
}

2.4.4. 在范围特性上使用 “min-” 与 “max-” 前缀

与其如上所述在范围上下文中对一个 “range” 类型的 媒体特性 求值， 该特性也可以写作普通的 媒体特性， 但在特性名称上加上 “min-” 或 “max-” 前缀。

这等价于在 范围上下文 中对该特性求值，如下：

• 在特性名称上使用 “min-” 前缀等价于使用 “>=” 运算符。 例如，(min-height: 600px) 等价于 (height >= 600px)。
• 在特性名称上使用 “max-” 前缀等价于使用 “<=” 运算符。 例如，(max-width: 40em) 等价于 (width <= 40em)。

注：因为 “min-” 与 “max-” 都等价于包含边界值的范围比较， 所以在某些情况下它们可能会带来限制。

@media (max-width: 320px) { /* 适用于视口 <= 320px 的样式 */ }
@media (min-width: 321px) { /* 适用于视口 >= 321px 的样式 */ }

@media (max-width: 320px) { /* 适用于视口 <= 320px 的样式 */ }
@media (min-width: 320.01px) { /* 适用于视口 >= 320.01px 的样式 */ }

@media (width <= 320px) { /* 适用于视口 <= 320px 的样式 */ }
@media (width > 320px) { /* 适用于视口 > 320px 的样式 */ }

“Discrete” 类型的属性不接受 “min-” 或 “max-” 前缀。 将此类前缀添加到一个 “discrete” 类型的 媒体特性 上，只会导致特性名称未知。

尝试在 布尔上下文 中求值一个带 min/max 前缀的 媒体特性 是无效的，并会导致语法错误。

2.5. 组合媒体特性

多个 媒体特性 可以通过完整的布尔代数 （not、and、or）组合成一个 媒体 条件。

• 任何媒体特性都可以通过在其前放置 not 来取反。 例如，not (color) 会反转 (color) 的含义——由于 (color) 匹配任何具有任意颜色显示能力的设备， not (color) 则匹配不具备任何颜色显示能力的设备。

• 两个或更多媒体特性可以通过在它们之间放置 and 来串联， 使得仅当全部媒体特性都为真时查询才为真。 例如，(width < 600px) and (height < 600px) 仅匹配屏幕在两个维度上都小于 600px 宽的设备。

• 或者，两个或更多媒体特性也可以通过在它们之间放置 or 来串联， 使得只要任意一个媒体特性为真，查询就为真。 例如，(update: slow) or (hover: none) 在以下情况匹配： 设备更新屏幕很慢（例如电子书阅读器）或主指点设备不具备悬停能力； 这可能表明应使用一种布局， 展示更多信息，而不是将其紧凑地隐藏起来，直到用户悬停才显示。

• 媒体条件 可以通过圆括号 () 分组，从而可以像单个媒体查询一样在条件中嵌套。 例如，(not (color)) or (hover) 在单色设备和/或具备悬停能力的设备上为真。 如果希望查询的是单色且不具备悬停能力的设备， 则必须写作 not ((color) or (hover))（或等价地写作 (not (color)) and (not (hover))）。

在媒体查询的同一“层级”中混用 and 与 or 以及 not 是无效的。 例如，(color) and (pointer) or (hover) 是非法的， 因为其意图不清。 相反，可以用括号将使用某个连接关键字的内容分组， 得到 (color) and ((pointer) or (hover)) 或 ((color) and (pointer)) or (hover)。 这两者含义差异很大： 若仅 (hover) 为真， 第一个求值为假， 而第二个求值为真。

3. 语法

前文各节中的行文与铁路图中给出了媒体查询语法的非正式描述。 本节描述正式的媒体查询语法， 其中规则/属性的文法语法定义于 [CSS-SYNTAX-3] 与 [CSS-VALUES-4]。

要解析一个 <media-query-list> 产生式， 先 解析一个以逗号分隔的组件值列表， 然后将返回列表中的每个条目解析为一个 <media-query>。 其值为据此产生的 <media-query> 的列表。

注：对 <media-query-list> 解析的这一显式定义 对于使 媒体查询列表 的错误恢复行为有明确定义是必要的。

注：该 <media-query-list> 解析定义 有意接受空列表。

注：根据 [CSS-SYNTAX-3]， token 是 ASCII 不区分大小写 的。

<media-query> = <media-condition>
             | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
<media-type> = <ident>

<media-condition> = <media-not> | <media-in-parens> [ <media-and>* | <media-or>* ]
<media-condition-without-or> = <media-not> | <media-in-parens> <media-and>*
<media-not> = not <media-in-parens>
<media-and> = and <media-in-parens>
<media-or> = or <media-in-parens>
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>

<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> <mf-comparison> <mf-value>
           | <mf-value> <mf-comparison> <mf-name>
           | <mf-value> <mf-lt> <mf-name> <mf-lt> <mf-value>
           | <mf-value> <mf-gt> <mf-name> <mf-gt> <mf-value>
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>
<mf-lt> = '<' '='?
<mf-gt> = '>' '='?
<mf-eq> = '='
<mf-comparison> = <mf-lt> | <mf-gt> | <mf-eq>

<general-enclosed> = [ <function-token> <any-value>? ) ] | [ ( <any-value>? ) ]

<media-type> 产生式不包含关键字 only、 not、and、or 与 layer。

注：排除 layer 是因为 否则在用于 级联层 的 @import url(…) layer; 语法中使用时会产生歧义。 参见 [CSS-CASCADE-5]。

若出现的话， “<” 或 “>” 的 <delim-token> 与其后续的 “=” <delim-token> 之间不允许出现空白字符。

注：not、and 或 or 关键字与其后续的 ( 字符之间必须有空白字符， 因为若没有空白字符，它将被解析为 <function-token>。 这并未被显式定义为无效，因为它已被上述文法所覆盖。 不过，在 ) 与后续关键字之间可以有空白字符。

在解析 <media-in-parens> 产生式时， 只有当输入不匹配前两个分支时， 才必须选择 <general-enclosed> 分支。<general-enclosed> 的存在是为了允许未来以合理兼容的方式扩展文法。

3.1. 求值媒体查询

<media-condition> 或 <media-condition-without-or> 的每个主要子表达式 都关联一个布尔结果，如下：

<media-condition>

<media-condition-without-or>

结果为其子表达式的结果。

<media-in-parens>

结果为其子项的结果。

<media-not>

结果为该 <media-in-parens> 项的否定。 unknown 的否定仍为 unknown。

<media-in-parens> <media-and>*

若该 <media-in-parens> 子项 以及所有 <media-and> 子项中的 <media-in-parens> 子项都为真，则结果为真； 若其中至少一个 <media-in-parens> 项为假，则结果为假； 否则为 unknown。

<media-in-parens> <media-or>*

若该 <media-in-parens> 子项 以及所有 <media-or> 子项中的 <media-in-parens> 子项都为假，则结果为假； 若其中至少一个 <media-in-parens> 项为真，则结果为真； 否则为 unknown。

<general-enclosed>

结果为 unknown。

作者不得在其样式表中使用 <general-enclosed>。它仅为向前兼容而存在， 以便新的语法扩展不会在旧版用户代理中使 <media-condition> 的太大部分变为无效。

<media-feature>

结果为对指定媒体特性求值得到的结果。

如果上述任一产生式的结果 被用于任何期望二值布尔（true/false）的上下文中， 则必须将 “unknown” 转换为 “false”。

注：这意味着，例如， 当 媒体查询 用于 @media 规则中时， 若其解析为 “unknown”，它将被当作 “false” 处理并且不会匹配。

3.2. 错误处理

不匹配前一节文法的媒体查询在解析时必须被替换为 not all。

注：请注意：文法不匹配不会抹除整个 媒体查询列表， 而只会抹除有问题的那个 媒体查询。 上述定义的解析行为会在下一个顶层逗号处自动恢复。

@media (example, all,), speech { /* only applicable to speech devices */ }
@media &test, speech           { /* only applicable to speech devices */ }

@media (example, speech { /* rules for speech devices */ }

未知的 <media-type> 必须被当作不匹配来处理。

未知的 <mf-name> 或 <mf-value>， 或不匹配该 媒体特性 的值语法的特性值， 会导致结果为 “unknown”。 值为 “unknown” 的 <media-query> 必须被替换为 not all。

<link media="screen and (max-weight: 3kg) and (color), (color)"rel="stylesheet" href="example.css" />

@media (min-orientation:portrait) { … }

@media test;,all { body { background:lime } }

4. 视口/页面特征媒体特性

4.1. 宽度：width 特性

width 媒体特性描述输出设备的目标显示区域的宽度。 对于 连续媒体， 这指视口的宽度 （如 CSS2 第 9.1.1 节所述 [CSS2]）， 包括已渲染滚动条的尺寸（若有）。 对于 分页媒体，这指页面框的宽度 （如 CSS2 第 13.2 节所述 [CSS2]）。

<length> 的解释方式遵循 § 1.3 单位。

width 在 负值范围内为假。

<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" />

@media (400px <= width <= 700px) { … }

@media (min-width: 20em) { … }

4.2. 高度：height 特性

height 媒体特性描述输出设备的目标显示区域的高度。 对于 连续媒体， 这指视口的高度，包括已渲染滚动条的尺寸（若有）。 对于 分页媒体，这指页面框的高度。

<length> 的解释方式遵循 § 1.3 单位。

height 在 负值范围内为假。

4.3. 纵横比：aspect-ratio 特性

aspect-ratio 媒体特性定义为 width 媒体特性的值 与 height 媒体特性的值之比。

4.4. 方向：orientation 特性

portrait

当 height 媒体特性的值大于或等于 width 媒体特性的值时， orientation 媒体特性为 portrait。

landscape

否则，orientation 为 landscape。

@media (orientation:portrait) { … }

4.5. 块轴溢出：overflow-block 特性

overflow-block 媒体特性描述当内容在 块轴 上溢出初始包含块时， 设备的行为。

none

在 块轴 上不存在处理溢出的手段； 任何溢出的内容都将直接不显示。 示例：广告牌

scroll

通过允许用户滚动来暴露 块轴 上的溢出内容。 示例：计算机屏幕

paged

内容被拆分为离散页面； 在 块轴 上溢出某页的内容 将显示在下一页。 示例：打印机、电子书阅读器

匹配 none 或 scroll 的媒体称为 连续 媒体， 而匹配 paged 的媒体称为 分页媒体

注：未来可能会为此媒体特性添加额外值， 以描述具有混合行为（结合了 连续 与 分页媒体 方面特征）的用户代理类别。 例如，Presto 排版引擎（现已停止维护）曾带有一种半分页的展示模式， 其行为类似于 continuous，但会遵循强制分页符。 由于目前未知有任何仍在发布的用户代理具有这种行为类型， 工作组决定在本级中不添加此类值， 以避免对任何此类用户代理作出不恰当的描述。 任何实现了上述取值都无法充分描述的用户代理者， 鼓励联系工作组， 以便考虑对该媒体特性的扩展。

4.6. 行内轴溢出：overflow-inline 特性

overflow-inline 媒体特性描述当内容在 行内轴 上溢出初始包含块时， 设备的行为。

none

在 行内 轴 上不存在处理溢出的手段； 任何溢出的内容都将直接不显示。

scroll

通过允许用户滚动来暴露 行内 轴 上的溢出内容。

注：目前未知存在对行内方向溢出内容进行分页（paged overflow）的实现， 并且这一概念本身似乎也不太合理， 因此对于 overflow-inline， 有意不提供 paged 值。

4.7. 水平视口分段：horizontal-viewport-segments 特性

horizontal-viewport-segments 媒体特性描述 视口在水平方向上的逻辑分段数量。

horizontal-viewport-segments 媒体特性在 负值范围内为假。

当视口被一个或多个硬件特性（例如折痕或位于不同显示屏之间的铰链）分割， 且这些硬件特性作为逻辑分隔符时，分段指的是视口中可被页面视为逻辑上彼此独立的区域。

4.8. 垂直视口分段：vertical-viewport-segments 特性

vertical-viewport-segments 媒体特性描述 视口在垂直方向上的逻辑分段数量。

vertical-viewport-segments 媒体特性在 负值范围内为假。

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) { … }

4.9. 显示模式：display-mode 媒体 特性

display-mode 媒体特性描述当前 浏览上下文 目前呈现给最终用户的模式。在子浏览上下文中，显示模式 必须与 顶层浏览上下文 的显示模式一致。

该特性主要用于确定用户代理对某个 应用上下文 应用了哪一种 显示模式。 因此，该特性的取值与 [APPMANIFEST] 中定义的 显示模式 相对应。 不过，它也可用于非应用上下文中，以确定视口是否处于其他模式，例如 全屏或画中画。

fullscreen

浏览上下文在隐藏浏览器 UI 元素的情况下显示，并占据全部可用显示区域。全屏上下文可能由 fullscreen 显示模式（在 应用清单 中）导致， 或由 Fullscreen API 中元素的 requestFullscreen() 方法触发， 或通过其他方式（例如用户使用用户代理内置控件手动激活全屏模式）。

对应于 fullscreen 显示模式。

standalone

正在使用 standalone 显示模式。仅适用于 应用上下文。

minimal-ui

正在使用 minimal-ui 显示模式。仅适用于 应用上下文。

browser

浏览上下文使用平台特定的惯例来打开用户代理中的超链接 （例如在浏览器标签页中，或带有地址栏等控件的网页浏览器窗口中）。 这应当用于不适合任何其他显示模式的非 应用上下文。

对应于 browser 显示模式。

picture-in-picture

该模式允许用户在与设备上的其他站点或应用交互时继续观看媒体内容。 浏览上下文显示在一个浮动且始终置顶的窗口中。 用户代理可能会包含其他平台特定的 UI 元素， 例如 “back-to-tab” 与 “site information” 按钮， 或平台与用户代理的惯常做法中的其他元素。

{
  "display": "standalone"
}

@media (display-mode: standalone) { … }

/* 当视口处于全屏时生效 */
@media (display-mode: fullscreen) { … }

/* 当某个元素处于全屏时生效 */
#game:fullscreen { … }

注：未来可能会为此媒体特性添加额外值， 以匹配 [APPMANIFEST] 中新增的 显示模式。

5. 显示质量媒体特性

5.1. 显示分辨率：resolution 特性

resolution 媒体特性描述输出 设备的分辨率，即像素密度；它会考虑 页面缩放，但假定 缩放因子 为 1.0。

resolution 媒体特性 在负值范围内为假

在查询像素非正方形的媒体时，resolution 查询的是垂直维度上的密度。

对于打印机，这对应于加网分辨率 （用于打印任意颜色打印点的分辨率）。 打印机可能具有不同的灰度打印分辨率。

对于不受分辨率物理约束的输出介质 （例如输出到矢量图形）， 此特性必须匹配 infinite 值。 为了在 范围上下文 中对该媒体特性求值， infinite 必须被视为大于任何可能的 <resolution>。 （也就是说，类似 (resolution > 1000dpi) 这样的查询 在 infinite 媒体上将为真。）

@media (resolution >= 2dppx)

@media print and (min-resolution: 300dpi) { … }

@media print and (min-resolution: 118dpcm) { … }

5.2. 显示类型：scan 特性

scan 媒体特性描述某些输出设备的扫描过程。

interlace

CRT 与某些类型的等离子电视屏幕使用“隔行”渲染， 视频帧在仅指定屏幕上的“偶数”行与仅指定“奇数”行之间交替， 利用多种自动的心理图像校正能力来产生平滑运动。 这使它们能够以一半的带宽成本模拟更高 FPS 的广播。

在隔行屏幕上显示时， 作者应避免在屏幕上进行非常快速的移动，以避免产生“梳状（combing）”， 并应确保屏幕上的细节宽度大于 1px，以避免 “twitter”。

progressive

使用“逐行”渲染的屏幕会完整显示每一帧， 无需特殊处理。

大多数现代屏幕，以及所有计算机屏幕，都使用逐行渲染。

@media (scan: interlace) { body { font-family: sans-serif; } }

注：在撰写本文时，所有已知实现都匹配 scan: progressive，而不是 scan: interlace。

5.3. 检测控制台显示：grid 特性

grid 媒体特性用于查询输出设备是网格（grid）还是位图（bitmap）。 如果输出设备基于网格 （例如 “tty” 终端，或仅提供一种固定字体的手机显示器）， 其值为 1。 否则，其值为 0。

<mq-boolean> 值类型是取值为 0 或 1 的 <integer>。 任何其他整数值都是无效的。注意：在 CSS 中 -0 总是等价于 0， 因此它也被接受为一个有效的 <mq-boolean> 值。

注：<mq-boolean> 类型仅为兼容旧有用途而存在。 如果今天再设计这个特性， 它将会为其取值使用规范的具名关键字。

@media (grid) and (max-width: 15em) { … }

注：在撰写本文时，所有已知实现都匹配 grid: 0，而不是 grid: 1。

5.4. 显示更新频率：update 特性

update 媒体特性用于查询输出设备在内容渲染后 修改其外观的能力。 它接受以下值：

none

一旦渲染完成，布局将无法再更新。 示例：打印在纸上的文档。

slow

布局可以按照 CSS 的通常规则动态变化， 但输出设备无法足够快速地渲染或显示变化， 从而使其被感知为平滑动画。 示例：电子墨水屏或性能严重不足的设备。

fast

布局可以按照 CSS 的通常规则动态变化， 且输出设备在速度上没有异常限制， 因此可以使用诸如 CSS Animations 这类需要定期更新的效果。 示例：计算机屏幕。

@media (update) {
  a { text-decoration: none; }
  a:hover, a:focus { text-decoration: underline; }
}
/* In non-updating UAs, the links get their default underline at all times. */

5.5. 检测显示技术： environment-blending 特性

environment-blending 媒体特性用于查询用户显示设备的特征， 以便作者可以调整文档的样式。 作者可能会根据显示技术选择调整页面的视觉效果和/或布局， 以增强吸引力或提高可读性。

以下取值有效：

opaque

文档渲染在不透明介质上，例如传统显示器或纸张。 黑色是暗的，白色是 100% 亮度。

additive

显示设备使用加色混合将画布的颜色与现实世界融合。 黑色是完全透明的，白色是 100% 亮度。

例如：汽车中的平视显示器。

subtractive

显示设备使用减色混合将画布的颜色与现实世界融合。 白色是完全透明的，而深色具有最高对比度。

例如：嵌入浴室镜中的 LCD 显示屏。

是否需要 subtractive 这个值？

body { background-color: white; }
p { color: black; }

@media(environment-blending: additive) {
  body { background-color: black; }
  p { color: white; font-size: 16px; font-weight: 1000; }
}

6. 颜色媒体特性

6.1. 色彩深度：color 特性

color 媒体特性描述输出设备每个颜色分量的位数。 如果设备不是彩色设备，其值为零。

color 在负值范围内为假。

@media (color) { … }
@media (min-color: 1) { … }

@media (color >= 8) { … }

如果不同颜色分量用不同的位数表示， 则使用其中最小的位数。

在使用索引色的设备中， 使用查找表中每个颜色分量的最小位数。

注：所描述的功能只能在较浅层面上描述颜色能力。 color-gamut 通常更符合作者需求。 如果需要进一步功能， RFC2879 [RFC2879] 提供了更具体的媒体特性， 这些特性可能在后续阶段得到支持。

6.2. 调色板彩色屏幕：color-index 特性

color-index 媒体特性描述输出设备颜色查找表中的条目数量。 如果设备不使用颜色查找表，其值为零。

color-index 在负值范围内为假。

@media (color-index) { … }
@media (color-index >= 1) { … }

<?xml-stylesheet media="(min-color-index: 256)"
  href="http://www.example.com/…" ?>

6.3. 单色屏幕：monochrome 特性

monochrome 媒体特性描述单色帧缓冲区中每像素的位数。 如果设备不是单色设备， 输出设备的值将为 0。

monochrome 在负值范围内为假。

@media (monochrome) { … }

@media (monochrome >= 2) { … }

<link rel="stylesheet" media="print and (color)" href="http://…" />
<link rel="stylesheet" media="print and (monochrome)" href="http://…" />

6.4. 色彩显示质量：color-gamut 特性

color-gamut 媒体特性描述 UA 与输出设备所支持的近似颜色范围。 也就是说，如果 UA 接收到指定色彩空间中的颜色内容， 它可以促使输出设备渲染出对应的颜色， 或者渲染出足够接近的颜色。

注：该查询使用近似范围有几个原因。 首先，显示硬件存在大量差异。 例如，某设备可能声称支持 “Rec. 2020”，但实际上其渲染能力显著低于完整色域。 其次，不同设备支持的色彩范围非常多，逐一列举会很繁琐。 在大多数情况下，作者不需要知道显示器的精确能力， 只需要知道它是否优于 sRGB， 或是否显著优于 sRGB。 这样他们就可以向用户提供带有色彩配置文件标记的合适图像。

srgb

UA 与输出设备能支持近似 sRGB 色域或更大范围。

注：预计绝大多数彩色显示器 都能够对这类查询返回真。

p3

UA 与输出设备能支持近似 Display P3 [Display-P3] 色彩空间所指定的色域或更大范围。

注：p3 色域 大于且包含 srgb 色域。

rec2020

UA 与输出设备能支持近似 ITU-R Recommendation BT.2020 色彩空间所指定的色域或更大范围。

注：rec2020 色域 大于且包含 p3 色域。

下表以色彩空间色度坐标的形式列出了这些色彩空间的原色， 如 [COLORIMETRY] 中所定义。

注：上表不包含足以完整描述这些色彩空间的信息， 但足以用于确定输出设备是否近似覆盖其各自的色域。 参见 [SRGB] 以了解更多 sRGB 信息，参见 [Display-P3] 以了解更多 Display P3 信息， 以及参见 [ITU-R-BT-2020-2] 以了解更多关于 ITU-R Recommendation BT.2020 的信息。

@media (color-gamut: p3) { … }

注：如果输出设备的完整输出色域足够大， 或者一个色域是另一个受支持色域的子集， 那么输出设备可能会对该媒体特性的多个取值返回真。 因此，最佳用法是按“递增”方式使用该特性——当 (color-gamut: srgb) 为真时设置一个基础值， 然后在 (color-gamut: p3) 为真时覆盖它，依此类推。

注：某些输出设备， 例如单色显示器， 甚至无法支持 srgb 色域。 要测试这些设备， 你可以在否定的布尔上下文形式中使用该特性：not (color-gamut)。

6.5. 动态范围：dynamic-range 特性

dynamic-range 表示由用户代理与输出设备所支持的最大亮度、 色彩深度与对比度（contrast ratio）的组合。

high

用户代理与输出设备满足以下全部条件：

• 支持 高峰值亮度

• 支持 高对比度

• 色彩深度大于 24 bit，或 RGB 每个颜色分量大于 8 bit

注：某些设备具备高动态范围能力， 但该能力并非始终开启， 需要被激活 （有时通过编程、有时由用户、有时基于内容）。 该媒体特性不测试此类模式是否处于激活状态， 只测试设备是否具备高动态范围视觉能力。

standard

该值匹配任何视觉设备， 而不匹配缺乏视觉能力的设备。

注：该媒体特性的多个值可以同时匹配： 匹配 high 的用户代理也将匹配 standard。

6.5.1. 确定显示器的对比度与亮度

峰值亮度 指最亮点能达到的亮度： 对于诸如 LCD 屏幕这类发光设备，指其可产生的最亮点； 对于诸如纸张或电子墨水屏这类反光设备， 则指其对光吸收最少的点。

注：某些设备只能在短时间内，或在其表面某个较小区域内， 产生其 峰值亮度。

对比度（contrast ratio） 是 系统所能产生的最亮颜色的亮度 与最暗颜色的亮度之比。

本规范未定义可用于测量这些特性的精确方法； 它也允许用户代理自行决定 何为 高 对比度， 以及何为 高 峰值亮度。 不过，用户代理仍必须尝试符合以下意图： 具备 高峰值亮度 的设备能够显示“亮于白色”的高光， 而在具备此能力的同时还能呈现深黑 （而不是整体很亮但发灰的图像）， 则表明其具备 高对比度。

注：dynamic-range 与 video-dynamic-range 的判定会因用户代理而异， 但预计其语义总体上是可依赖的。

6.6. 检测显示器上的反色：inverted-colors 特性

inverted-colors 媒体特性表明内容是正常显示， 还是颜色已被反转。

注：这表示用户代理或底层操作系统已强制反转所有颜色， 而不是请求作者这么做。 这有时作为一种简单的无障碍功能提供， 允许用户在浅底深字与深底浅字之间切换。 然而，这会产生令人不悦的副作用， 例如反转图片， 或将阴影变成高光， 从而降低内容的可读性。

none

颜色正常显示。

inverted

显示区域内的所有像素都已被反转。

如果用户代理做了某种内容感知的反转 （例如能保留图像的反转）， 则该值不得匹配。

注：这是因为该媒体特性的目标是使作者能够缓解 “非内容感知”的方式所带来的不良影响——这种方式会反转全部像素。 如果作者即使在内容感知的情形下也采取对策， 则作者的对策与 UA 的对策可能相互抵消。

@media (inverted-colors) {
  img:not(picture > img), picture, video {
    filter: invert(100%);
  }
}

@media (inverted-colors) {
  * {
    text-shadow: none !important;
    box-shadow: none !important;
  }
}

7. 交互媒体特性

“交互（interaction）”媒体特性反映用户与页面交互方式的各个方面。

pointer 与 hover 特性与“主要（primary）”指点设备的特性相关， 而 any-pointer 与 any-hover 可用于查询所有可能可用的指点设备的属性。

注：虽然本规范未定义用户代理应如何决定何者为“主要（primary）”指点设备， 但预期用户代理应通过综合以下因素来做出判断： 其运行所在的设备/环境信息、 可用指点设备的数量与类型、 以及这些设备通常和/或当前正在被使用的程度。 在某些情形下，设备的主要输入机制并非指点设备， 但存在一个作为次要输入、且使用频率较低的指点设备输入， 用户代理可以决定将非指点设备视为主要输入机制（从而得到 'pointer: none'）。 用户代理也可以决定动态更改被视为主要指点设备的类型， 以响应用户环境的变化 或用户与 UA 交互方式的变化。

注：pointer、hover、any-pointer 与 any-hover 特性仅与指点设备的特征（或完全不存在）相关， 不能用于检测诸如键盘等非指点设备输入机制的存在。 作者应当考虑到非指点设备输入的潜在存在， 而不应仅根据查询这些特性匹配到的取值来推断。

7.1. 指点设备质量：pointer 特性

pointer 媒体特性用于查询诸如鼠标之类的指点设备的存在与精确度。 若存在多个指点设备， pointer 媒体特性必须反映用户代理所确定的“主要（primary）”指点设备的特征。 （若要查询可用的任意指点设备的能力， 参见 any-pointer 媒体特性。）

none

设备的主要输入机制不包含指点设备。

coarse

设备的主要输入机制包含精确度有限的指点设备。 示例包括触摸屏与动作检测传感器（例如 Xbox 的 Kinect 外设）。

fine

设备的主要输入机制包含精确的指点设备。 示例包括鼠标、触控板与绘图触控笔。

coarse 与 fine 都表示存在指点设备， 但在精确度上有所不同。 若在缩放因子为 1 时，很难或不可能可靠地点选多个彼此相邻且较小的目标之一， 则该指点设备可被归类为 coarse。 更改缩放级别不会影响该媒体特性的值。

注：由于 UA 可能为用户提供缩放能力， 或次要指点设备可能具备不同精确度， 即便该媒体特性的值为 coarse，用户仍可能进行精确点击。 该媒体特性并不表示用户永远无法精确点击， 只表示对他们而言这样做不方便。 预期作者在遇到 coarse 值时， 应通过设计不依赖精确点击即可操作的页面来作出响应。

出于无障碍原因， 即便在其指点设备可描述为 fine 的设备上， UA 也可以对该媒体查询给出 coarse 或 none 的值， 以表明用户在精确操纵指点设备方面存在困难，或完全无法操纵。 此外，即便主要指点设备具备 fine 指点精度， 用户也可能额外拥有可用的 coarse 指点设备。 作者可能希望查询 any-pointer 媒体特性，以将这些其他潜在的 coarse 指点设备纳入考虑。

/* 如果主要指点设备精度不足，则放大单选按钮与复选框 */
@media (pointer:coarse) {
  input[type="checkbox"], input[type="radio"] {
    min-width:30px;
    min-height:40px;
    background:transparent;
  }
}

7.2. 悬停能力：hover 特性

hover 媒体特性用于查询用户是否能够使用主要指点设备在页面元素上悬停。 如果设备有多个指点设备， hover 媒体特性必须反映用户代理所确定的“主要（primary）”指点设备的特征。 （若要查询可用的任意指点设备的能力， 参见 any-hover 媒体特性。）

none

表示主要指点设备无法悬停， 或者根本没有指点设备。 示例包括触摸屏与使用基础绘图触控笔的屏幕。

能够悬停但悬停操作不方便、且不是其正常使用方式的指点设备， 也匹配该值。 例如，对触摸屏而言，若将长按视作悬停， 则它会匹配 hover: none。

hover

表示主要指点设备可以轻松地在页面局部区域上悬停。 示例包括鼠标与可对屏幕进行物理指向的设备，例如 Nintendo Wii 控制器。

出于无障碍原因，即便设备确实支持悬停， UA 也可能对该媒体查询给出 hover: none 的值， 以选择使用无需悬停也能良好工作的布局。 注意：即便主要输入机制具备 'hover: hover' 能力， 用户也可能拥有额外的输入机制，它们并不提供悬停能力。

/* 仅在能方便悬停的设备上使用悬停触发的下拉菜单。 */
@media (hover) {
  .menu > li        {display:inline-block;}
  .menu ul          {display:none; position:absolute;}
  .menu li:hover ul {display:block; list-style:none; padding:0;}
  /* ... */
}

7.3. 所有可用交互能力：any-pointer 与 any-hover 特性

any-pointer 与 any-hover 媒体特性与 pointer 与 hover 媒体特性相同， 但它们对应于用户所有可用指点设备能力的并集。 对于 any-pointer， 如果不同指点设备的特征不同，则可能有多个取值同时匹配。

any-pointer 与 any-hover 只有在以下情况才必须匹配 none： 全部指点设备在对应查询下都将匹配 none， 或者根本不存在任何指点设备。

7.4. 检测 UA 提供的导航控件：nav-controls 特性

nav-controls 媒体特性使作者能够了解： 用户代理是否在其用户界面中提供 显而易见（obviously discoverable）的导航控件。

注：传统浏览器通常确实会提供此类控件， 网页通常也无需关心这一点； 但在某些上下文中， Web 应用会通过所谓的 web-view 运行， 而这类环境并不总是具备完整的用户界面。 因此，让作者知道用户代理提供了哪些能力是有用的， 以便他们考虑是否需要提供一种易于发现的替代方案。

在此上下文中，显而易见（obviously discoverable） 指的是以下控件： 要么在用户界面中直接可见（例如按钮）， 要么是该设备用户界面中典型的其他形式控件，且用户可轻易识别。 在视觉用户界面的情形下， 这通常是一个可见控件； 不过在音频或触觉用户界面中也可能是其他东西。 重要的是， 这并非指键盘快捷键或手势； 即便它们很方便， 但仅通过观察（在视觉 UI 的情况下）用户代理本身并不能显而易见地发现它们。

以下取值有效：

none

用户代理没有任何 显而易见（obviously discoverable）的导航控件， 尤其是不包含使用户代理返回到页面之前的 会话历史条目 的控件。

back

用户代理提供导航控件， 包括至少一个 显而易见（obviously discoverable）的控件， 使用户代理返回到页面之前的 会话历史条目 （通常为“返回”按钮）。

@media (nav-controls: back) {
  #back-button {
    display: none;
  }
}

@media (nav-controls) {
  #back-button {
    display: none;
  }
}

显而易见（obviously discoverable）控件是否处于激活状态，不影响该媒体特性的求值。

8. 视频前缀特性

一些用户代理，包括许多电视，会在两个独立的“平面”（双平面）中呈现视频和图形，这些平面具有不同的屏幕特性。提供了一组视频前缀特性用于描述视频平面。

任何双平面实现必须基于视频平面返回以下特性的值： video-color-gamut; video-dynamic-range. 所有其他特性必须基于图形平面返回值。

非双平面实现必须为视频前缀特性及其无前缀对应项返回相同的值。

8.1. 视频色域显示质量：video-color-gamut 特性

The video-color-gamut 媒体特性描述 UA 和输出设备的视频平面所支持的近似颜色范围。也就是说，如果 UA 接收到指定色彩空间的内容，它可以使输出设备渲染适当的颜色，或者渲染一个足够接近的颜色。

取值和色彩空间定义与 color-gamut 相同。

8.2. 视频动态范围: video-dynamic-range 特性

video-dynamic-range 表示 UA 和输出设备的视频平面所支持的最大亮度、色深和对比度的组合。

支持的值与 dynamic-range 相同。

9. 脚本化媒体特性

9.1. 脚本支持: scripting 特性

The scripting 媒体特性用于查询当前文档是否支持脚本语言，例如 JavaScript。

enabled

表示用户代理支持页面脚本，并且当前文档在其生命周期内脚本是启用的。

initial-only

表示用户代理支持页面脚本，并且当前文档在初始页面加载期间脚本是启用的，但之后不再支持。 例如用于打印的页面，或在服务器上渲染页面并向用户发送近乎静态版本页面的预渲染网络代理。

是否应该为 UA 在声称 initial-only 之前设置一个明确的最低阈值？有一个阈值会让作者知道他们可以依赖什么，并据此调整脚本。另一方面，确定该阈值很困难：如果设置得太低，作者可以依赖的脚本功能可能被限制到不实用的程度，即便实际的 UA 可能支持更多。但将其设得更高可能导致我们排除在某些情况下确实在加载时支持脚本但基于复杂启发式而限制它的 UA。例如，保守的定义可能至少包括运行所有内联脚本并触发 DOMContentLoaded 事件。但如果大多数（或可能全部）initial-only UA 也加载外部脚本（包括 async 和 defer）并触发 load 事件，那么让作者仅约束自己依赖于前述情况并不有用。另一方面，要求加载外部脚本并触发 load 事件可能会排除像 Opera mini 这样的 UA，它们通常会运行这些脚本，但可能基于超时和其他启发式决定不运行它们。 [Issue #503]

none

表示用户代理不会为该文档运行脚本；要么它不支持脚本语言，要么当前文档没有激活支持。

一些用户代理能够按脚本或按域关闭脚本支持，允许在特定文档中仅运行部分脚本。scripting 媒体特性不允许细粒度地检测哪些脚本被允许运行。在这种情形下，如果允许与文档同域的脚本运行，则 scripting 媒体特性的值应为 enabled 或 initial-only，否则为 none。

注: 将来某一级别的 CSS 可能扩展该媒体特性以允许细粒度检测哪些脚本被允许运行。

10. 自定义媒体查询

在设计使用媒体查询的文档时，相同的媒体查询可能在多个地方使用，例如用于限定多个 @import 语句。重复多次相同的媒体查询是一种编辑隐患；作者在修改时必须以相同方式编辑每一处拷贝，否则会在 CSS 中产生难以发现的错误。

为帮助缓解这个问题，本规范定义了一种定义 自定义媒体查询 的方法，所谓自定义媒体查询就是对更长更复杂媒体查询的简单命名别名。通过这种方式，在多处使用的媒体查询可以赋予一个 自定义媒体查询 名称，在各处使用该名称，编辑媒体查询只需修改一行代码。

一个 自定义媒体查询 使用 @custom-media 规则来定义：

@custom-media = @custom-media <extension-name> [ <media-query-list> | true | false ] ;

The <extension-name> 然后可以在 媒体特性 中使用。 它 必须 在 布尔上下文 中使用；在普通或 范围上下文 中使用它们是语法错误。如果给定了 <media-query-list>，则该 自定义媒体查询 在其所代表的 <media-query-list> 评估为 true 时评估为 true，否则为 false。如果给定了 true 或 false，则该 自定义媒体查询 分别评估为 true 或 false。

/* --modern targets modern devices that support color or hover */
@custom-media --modern (color), (hover);

@media (--modern) and (width > 1024px) {
  .a { color: green; }
}

@media ((color) or (hover)) and (width > 1024px) {
  .a { color: green; }
}

@media (color), (hover) and (width > 1024px) {
  .a { color: green; }
}

一个 @custom-media 规则可以引用其他 自定义媒体查询。然而，禁止循环，自定义媒体查询 不得以自身或直接或间接引用它的另一个 自定义媒体查询 为定义依据。任何试图以循环依赖定义 自定义媒体查询 的行为必须导致循环中的所有 自定义媒体查询 无法被定义。

如果多个 @custom-media 规则声明相同的 <extension-name>，则真假值以最后一个声明为准，忽略之前对相同 <extension-name> 的所有声明。

注: 为了错误处理的目的，未定义的 媒体特性 不同于评估为 false 的 媒体特性。详情见 Media Queries 4 § 3.2 错误处理。

@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {
  /* 窄窗口样式 */
}
@media (--narrow-window) and (script) {
  /* 在允许脚本时的特殊样式 */
}
/* 等等 */

10.1. 基于脚本的自定义媒体查询

<script>
CSS.customMedia.set('--foo', 5);
</script>
<style>
@media (_foo: 5) { ... }
@media (_foo < 10) { ... }
</style>

11. CSSOM

The CSSCustomMediaRule 接口表示一个 @custom-media 规则。

typedef (MediaList or boolean) CustomMediaQuery;

[Exposed=Window]
interface CSSCustomMediaRule : CSSRule {
  readonly attribute CSSOMString name;
  readonly attribute CustomMediaQuery query;
};

name, 类型为 CSSOMString, 只读

返回一个 CSSOMString，表示 <extension-name>（@custom-media 规则的名称）。

query, 类型为 CustomMediaQuery, 只读

表示 自定义媒体查询 的值。 返回的 CustomMediaQuery 将为以下之一：

• 如果规则以 <media-query-list> 定义，则为 MediaList 对象。
• 如果规则以值 true 定义，则为布尔值 true。
• 如果规则以值 false 定义，则为布尔值 false。

12. 用户偏好媒体特性

12.1. 检测页面上对较少动画的需求: the prefers-reduced-motion feature

The prefers-reduced-motion 媒体特性用于检测用户是否请求系统将其使用的非必要运动量最小化。

no-preference

表示用户未向系统表明任何偏好。此关键字值在 布尔上下文 中评估为 false。

reduce

表示用户已通知系统他们偏好一个移除或替换那些会触发前庭运动敏感者不适或使注意力缺陷者分心的基于运动的动画的界面。

12.2. 检测页面上对减少透明效果的需求: the prefers-reduced-transparency feature

The prefers-reduced-transparency 媒体特性用于检测用户是否请求系统将其使用的透明或半透明图层效果的数量最小化。

no-preference

表示用户未向系统表明任何偏好。此关键字值在 布尔上下文 中评估为 false。

reduce

表示用户已通知系统他们偏好一个将透明或半透明图层效果数量最小化的界面。

这如何与例如图案填充和背景等偏好交互？它们不是关于透明度，也会干扰形状识别。

12.3. 检测页面上对元素颜色对比度增加或减少的需求: the prefers-contrast feature

The prefers-contrast 媒体特性用于检测用户是否请求页面具有更高或更低的对比度。响应方式例如可以通过调整相邻颜色之间的对比度，或通过改变元素的视觉突出程度（例如调整边框）来实现。

no-preference

表示用户未向系统表明任何偏好。此关键字值在 布尔上下文 中评估为 false。

less

表示用户已通知系统他们偏好具有较低对比度的界面。

more

表示用户已通知系统他们偏好具有较高对比度的界面。

custom

表示用户已指明希望使用一组特定颜色，但这些特定颜色所隐含的对比度既不属于 more 也不属于 less。

注: 该值将匹配选择了既非特别高对比也非特别低对比的调色板的 强制颜色模式 的用户。见 § 12.4 检测强制颜色模式: the forced-colors feature。

一个要求 青色文字配铁锈色背景 的用户（至少在光度方面）并不是在表达特别高或低的对比需求，但这也不是没有偏好。

12.4. 检测强制颜色模式: the forced-colors feature

active

表示 强制颜色模式 已激活：用户代理在页面上强制应用用户选择的有限调色板。UA 将通过 CSS 系统颜色关键字向作者提供该调色板。详情见 CSS Color Adjustment 1 § 3 强制颜色调色板。

这并不一定表示对更高对比度的偏好。颜色已被强制调整以匹配用户的偏好，但该偏好可以是更低或更高对比度，或某种既非高亦非低的配置。

除了 forced-colors: active 外，如果用户选择的强制颜色调色板可以确定为具有特别高或低的对比度，用户代理还必须匹配 prefers-contrast: more 或 prefers-contrast: less 之一，否则应使 prefers-contrast: custom 匹配。

类似地，如果用户所选的强制颜色调色板符合 prefers-color-scheme 描述的某一颜色方案，则相应的值也必须匹配。

none

强制颜色模式 未激活。

12.5. 检测对浅色或深色配色方案的偏好: the prefers-color-scheme feature

The prefers-color-scheme 媒体特性反映了用户希望页面使用浅色或深色主题的偏好。

light

表示用户已表达对浅色主题（浅底上深色文字）的偏好，或未表达积极偏好（因此应获得“网页默认”的浅色主题）。

dark

表示用户已表达对深色主题（深底上浅色文字）的偏好。

注: 此特性的取值将来可能扩展（例如表达对浅色配色方案的更积极偏好，或对“褐色”等其他配色方案的偏好）。因此，使用该媒体特性的最具未来兼容性的方式是通过否定形式，例如 (prefers-color-scheme: dark) 和 (not (prefers-color-scheme: dark))，这能确保新值至少落入其中一个样式块。

用户表达偏好的方式可以不同。可能是操作系统暴露的系统范围设置，或由用户代理控制的设置。

注: 用户偏好也可能因介质而异。例如，用户可能在发光屏幕上偏好深色主题，但在打印时偏好浅色主题（以节省墨水和/或因为在纸上印刷时，墨色背景中挖空文字的可读性不如空白纸上的墨色文字）。UA 应考虑此类差异，以便 prefers-color-scheme 反映适合于介质的偏好，而不是脱离上下文的偏好。

如果在使用“安全动画”（Secure Animated）嵌入模式的嵌入 SVG 文档中评估，优选的配色方案必须反映嵌入文档中嵌入节点的 used color scheme 的值。

12.6. 检测在加载页面时减少数据使用的偏好: the prefers-reduced-data feature

该特性可能成为指纹识别的不良来源，并偏向于数据受限的低收入群体。 [Issue #10076]

The prefers-reduced-data 媒体特性用于检测用户是否偏好为页面提供使用更少数据的替代内容。

no-preference

表示用户未向系统表明任何偏好。此关键字值在 布尔上下文 中评估为 false。

reduce

表示用户已表达偏好接收精简的替代内容。

用户表达偏好的方式可以不同。它可能是操作系统暴露的系统范围设置，或由用户代理控制的设置。用户代理可以考虑基于用于设置 Save-Data HTTP 请求头的相同用户或系统偏好来设置此项。

注: 用户代理在处理该值的切换时（无论是在页面加载后切换还是在加载期间切换）被鼓励使用以用户为中心的自由裁量权。主要目标可以是不下载不必要的数据。考虑到如果页面已经用高质量资源加载并且用户将偏好切换为减少数据，页面可能不应立即更新文档，而是等待用户明确重新加载页面。同样，如果页面下载时间很长且用户将偏好切换为减少，这可能是立即切换到下载较小资源以节省带宽的好时机。用户代理可以根据他们认为合适的逻辑来处理此类情形，并且也应意识到这些情形的存在。

.image {
  background-image: url("images/heavy.jpg");
}

@media (prefers-reduced-data: reduce) {
  /* Save-Data: On */
  .image {
    background-image: url("images/light.jpg");
  }
}

12.7. 用户偏好的自动处理

用户代理可能有允许用户指明其偏好的显式设置，或可能基于底层操作系统的设置来确定。用户代理也可能基于关于设备、环境等的知识自动推断用户的偏好。在这种情况下，建议它们也提供一种方式，让用户选择退出或覆盖自动确定的偏好。

13. 脚本控制用户偏好

网站作者通常希望在尊重用户系统偏好的同时允许覆盖这些偏好。为此，本规范定义了一种方法，允许作者使用 § 12 用户偏好媒体特性 通过 PreferenceManager 接口来覆盖这些偏好。

此覆盖允许偏好与受这些偏好影响的各种平台功能集成。

13.1. 对 Navigator 接口的扩展

[Exposed=Window, SecureContext]
partial interface Navigator {
	[SameObject] readonly attribute PreferenceManager preferences;
};

13.1.1. preferences 属性

取用 preferences 属性时，应始终返回相同的 PreferenceManager 对象实例。

13.1.2. PreferenceManager 接口

[Exposed=Window, SecureContext]
interface PreferenceManager {
	readonly attribute PreferenceObject colorScheme;
	readonly attribute PreferenceObject contrast;
	readonly attribute PreferenceObject reducedMotion;
	readonly attribute PreferenceObject reducedTransparency;
	readonly attribute PreferenceObject reducedData;
};

13.1.3. colorScheme 属性

The colorScheme 属性是一个 PreferenceObject ，用于覆盖网站的配色方案用户偏好。本条建模参考了 § 12.5 检测对浅色或深色配色方案的偏好：prefers-color-scheme 特性。

如果为此偏好设置了覆盖：

• 用户代理必须在应用于某个origin 的所有样式表中（包括 UA 样式表）使用此覆盖，以实现 § 12.5 检测对浅色或深色配色方案的偏好：prefers-color-scheme 特性。

• 当通过 `matchMedia()` 从 CSSOM View § 4 扩展到 Window 接口 查询时，用户代理也必须使用此覆盖。

• 用户代理在计算 已使用的配色方案 时，也必须使用此覆盖。

• 用户代理在发送 User Preference Media Features Client Hints Headers § 2.5 Sec-CH-Prefers-Color-Scheme 时，也必须使用此覆盖。

• 用户代理对任何通常受 § 12.5 检测对浅色或深色配色方案的偏好：prefers-color-scheme 特性 影响的 UA 功能，也必须使用此覆盖。

13.1.4. contrast 属性

The contrast 属性是一个 PreferenceObject ，用于覆盖网站的对比度用户偏好。本条建模参考了 § 12.3 检测页面元素对提高或降低色彩对比度的偏好：prefers-contrast 特性。

如果为此偏好设置了覆盖：

• 用户代理必须在应用于某个origin 的所有样式表中（包括 UA 样式表）使用此覆盖，以实现 § 12.3 检测页面元素对提高或降低色彩对比度的偏好：prefers-contrast 特性。

• 当通过 `matchMedia()` 从 CSSOM View § 4 扩展到 Window 接口 查询时，用户代理也必须使用此覆盖。

• 用户代理在发送 User Preference Media Features Client Hints Headers § 2.3 Sec-CH-Prefers-Contrast 时，也必须使用此覆盖。

• 用户代理对任何通常受 § 12.3 检测页面元素对提高或降低色彩对比度的偏好：prefers-contrast 特性 影响的 UA 功能，也必须使用此覆盖。

注：与媒体特性不同，此偏好不能设置为 custom，因为它与 § 12.4 强制颜色模式检测：forced-colors 特性 紧密耦合。

13.1.5. reducedMotion 属性

The reducedMotion 属性是一个 PreferenceObject ，用于覆盖网站的减少动画（减少运动）用户偏好。本条建模参考了 § 12.1 检测页面上对更少运动的偏好：prefers-reduced-motion 特性。

如果为此偏好设置了覆盖：

• 用户代理必须在应用于某个origin 的所有样式表中（包括 UA 样式表）使用此覆盖，以实现 § 12.1 检测页面上对更少运动的偏好：prefers-reduced-motion 特性。

• 当通过 `matchMedia()` 从 CSSOM View § 4 扩展到 Window 接口 查询时，用户代理也必须使用此覆盖。

• 用户代理在发送 User Preference Media Features Client Hints Headers § 2.1 Sec-CH-Prefers-Reduced-Motion 时，也必须使用此覆盖。

• 用户代理对任何通常受 § 12.1 检测页面上对更少运动的偏好：prefers-reduced-motion 特性 影响的 UA 功能，也必须使用此覆盖。

注：受此偏好影响的 UA 功能示例包括禁用平滑滚动，或暂停走马灯元素（marquee）。

13.1.6. reducedTransparency 属性

The reducedTransparency 属性是一个 PreferenceObject ，用于覆盖网站的减少透明度用户偏好。本条建模参考了 § 12.2 检测页面上对减少透明度的偏好：prefers-reduced-transparency 特性。

如果为此偏好设置了覆盖：

• 用户代理必须在应用于某个origin 的所有样式表中（包括 UA 样式表）使用此覆盖，以实现 § 12.2 检测页面上对减少透明度的偏好：prefers-reduced-transparency 特性。

• 当通过 `matchMedia()` 从 CSSOM View § 4 扩展到 Window 接口 查询时，用户代理也必须使用此覆盖。

• 用户代理在发送 User Preference Media Features Client Hints Headers § 2.2 Sec-CH-Prefers-Reduced-Transparency 时，也必须使用此覆盖。

• 用户代理对任何通常受 § 12.2 检测页面上对减少透明度的偏好：prefers-reduced-transparency 特性 影响的 UA 功能，也必须使用此覆盖。

13.1.7. reducedData 属性

The reducedData 属性是一个 PreferenceObject ，用于覆盖网站的减少数据使用偏好。本条建模参考了 § 12.6 检测在加载页面时对减少数据使用的偏好：prefers-reduced-data 特性。

如果为此偏好设置了覆盖：

• 用户代理必须在应用于某个origin 的所有样式表中（包括 UA 样式表）使用此覆盖，以实现 § 12.6 检测在加载页面时对减少数据使用的偏好：prefers-reduced-data 特性。

• 当通过 `matchMedia()` 从 CSSOM View § 4 扩展到 Window 接口 查询时，用户代理也必须使用此覆盖。

• 用户代理在发送 Save Data API § 2.1.1 Save-Data 请求头字段 时，也必须使用此覆盖。

• 用户代理在计算 Save Data API § 2.1 saveData 属性 时，也必须使用此覆盖。

• 用户代理对任何通常受 § 12.6 检测在加载页面时对减少数据使用的偏好：prefers-reduced-data 特性 影响的 UA 功能，也必须使用此覆盖。

13.1.8. PreferenceObject 接口

[Exposed=Window, SecureContext]
interface PreferenceObject : EventTarget {
	readonly attribute DOMString? override;
	readonly attribute DOMString value;
	readonly attribute FrozenArray<DOMString> validValues;

	undefined clearOverride();
	Promise<undefined> requestOverride(DOMString? value);

	attribute EventHandler onchange;
};

13.1.8.1. override 属性

13.1.8.2. value 属性

13.1.8.3. validValues 属性

13.1.8.4. onchange 事件处理器属性

The onchange attribute is an 事件处理器 IDL 属性，用于 onchange 事件处理器，其事件类型为 change。

13.1.8.5. requestOverride() 方法

此算法需要更多细节，说明设置偏好覆盖究竟会做什么。

这里使用 TypeError 是否正确？

注：当计算值发生变化时会触发 `change` 事件，但当设置新覆盖时，即使值没有变化也会触发该事件。

13.1.8.6. clearOverride() 方法

注：当计算值发生变化时会触发 `change` 事件，但当清除覆盖时，即使值没有变化也会触发该事件。

附录 A：已弃用的媒体特性

下列 媒体特性 已被弃用。它们保留以向后兼容，但不适合新编写的样式表。作者不得使用它们。用户代理必须按规范支持它们。

要查询视口大小（或页面媒体上的页面框大小），应使用 width、height 和 aspect-ratio 媒体特性，而不是 device-width、device-height 和 device-aspect-ratio，因为后者指的是设备的物理尺寸，而不管用于布局的文档可用空间大小。device-* 媒体特性有时也被用作检测移动设备的代理。相反，作者应使用更能代表其试图针对的设备方面的媒体特性。

device-width

device-width 媒体特性描述输出设备渲染表面的宽度。 对于 连续媒体， 这是 Web 暴露屏幕区域（Web-exposed screen area）的宽度。 对于 分页媒体，这是页面纸张尺寸的宽度。

device-width 在负范围内为 false。

@media (device-width < 800px) { … }

注：如果设备可以在多种方向间切换（例如纵向和横向），则 device-* 媒体特性反映当前方向。

device-height

device-height 媒体特性描述输出设备渲染表面的高度。 对于 连续媒体， 这是 Web 暴露屏幕区域的高度。 对于 分页媒体，这是页面纸张尺寸的高度。

device-height 在负范围内为 false。

<link rel="stylesheet" media="(device-height > 600px)" />

device-aspect-ratio

device-aspect-ratio 媒体特性的定义为 device-width 与 device-height 媒体特性值的比率。

@media (device-aspect-ratio: 16/9) { … }
@media (device-aspect-ratio: 32/18) { … }
@media (device-aspect-ratio: 1280/720) { … }
@media (device-aspect-ratio: 2560/1440) { … }

变更

本节非规范性。

致谢

本节非规范性。

本规范由 W3C 层叠样式表工作组（Cascading Style Sheets Working Group）产生。

以下人员的评论改进了本规范： Adam Argyle, Amelia Bellamy-Royds, Andreas Lind, Andres Galante, Arve Bersvendsen, Björn Höhrmann, Chen Hui Jing, Chris Lilley, Chris Rebert, Christian Biesinger, Christoph Päper, Elika J. Etemad (fantasai), Emilio Cobos Álvarez, François Remy, Frédéric Wang, Fuqiao Xue, Greg Whitworth, Ian Pouncey, James Craig, Jay Harris, Jinfeng Ma, Kivi Shapiro, L. David Baron, Masataka Yakura, Matt Giuca, Melinda Grant, Michael Smith, Nicholas C. Zakas Patrick H. Lauke, Philipp Hoschka, Rick Byers, Rijk van Geijtenbeek, Rik Cabanier, Roger Gimson, Rossen Atanassov, Sam Sneddon, Sigurd Lerstad, Simon Kissane, Simon Pieters, Stephen Chenney, Steven Pemberton, Susan Lesch, Tantek Çelik, Thomas Wisniewski, Vi Nguyen, Xidorn Quan, Yves Lafon, akklesed, and 張俊芝 改进了本规范。

隐私考虑

本节非规范性。

安全性考虑

本节非规范性。