CSS3媒体查询规范文档

摘要

HTML4和CSS2当前支持取决于媒体的样式表,为不同的媒体类型度身打造。举个例子,一个文档可能在屏幕上使用sans-serif字体,而在打印时使用serif fonts字体。‘screen’和‘print’是已经定义的两种媒体类型。媒体查询通过允许更精确的样式表标签,扩展了这个媒体类型功能。

一个媒体查询则一个媒体类型以及零个或更多个检查特定的媒体特征条件的表达式构成。可以用在媒体查询中的媒体特征,包括‘width’、‘height’和‘color’。通过使用媒体查询,演示文档可以为输出设备的某个范围度身打造,而不需要改变内容本身。

本文档的状态

这个章节描述了本文档在它公布时的状态。别的文档可能取代本文档。可以在W3C技术报告索引上找到一个W3C公布以及技术报告的最新版本的列表。

W3C 推荐标准是一个成熟的文档,已经被反复检查并且已被证明是可实现的。W3C鼓励每个人实现这个规范文档。(存档)欢迎在公共邮件列表 www-style@w3.org(参见instructions)中讨论本规范文档。在发送邮件时,请把文本“css3-mediaqueries”放在主题中,比如说这样:“[css3-mediaqueries] …summary of comment…”。

本文档已经经过W3C成员的检查,经过软件开发员的检查,还经过了别的W3C小组和利益团体的检查,得到了Director的支持,成为推荐标准。这是一个稳定的文档,可能用作参考材料,或者在别的文档中引用它。W3C在制定本推荐标准中的角色是,着眼于规范,并促进其广泛的频署。它增强了Web的功能以及互操作性。

请参阅工作小组的编译器报告以及媒体查询的测试套件

还请参阅评论的处理以及修改列表,相对于上一版本的推荐标准

作为W3C推荐标准发布,并不意味着已经得到W3C伙伴的认可。这是一个草案文档,可能在任何时候被更新、被别的文档替代,或者被弃用。不适合在别的进行中的作品中引用这个文档。

本文档由CSS工作小组制作(部分样式活动)。

根据W3C专利政策2004年2月5日版制作了本文档。W3C保留了一个专利公开的公共列表,用以联系小组的可发布成果;拥有专利的实际知识的个人,如果认为包含了Essential Claim(s),必须参照W3C专利政策第六节披露信息。

这个文档和以往一样,提出推荐标准版本,除了编辑修改前页,并更新参考资料。

1. 背景

(本章节是非规范的。)

HTML4 [HTML401] 和CSS2 [CSS21] 当前支持依赖于媒体的样式表,为不同的媒体类型度身打造。举个例子,一个文档可能针对屏幕的打印机使用不同的样式表。在HTML4中,这些可能写成:

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

在CSS样式表内部,一段内容可以声明这一部分只应用到特定的媒体类型上:

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

在HTML4中定义了‘print’和‘screen’媒体类型。在HTML4中定义的完整的媒体列表是:‘aural’、‘braille’、‘handheld’、‘print’、‘projection’、‘screen’、‘tty’、‘tv’。CSS2定义了相同的列表,但是弃用了‘aural’,并添加了 ‘embossed’和‘speech’。而且,使用‘all’表示样式表应用到所有的媒体类型上。

有若干种用户代理支持媒体专有的样式表。最常用的功能是区分‘screen’和‘print’。

已经有一些请求,要求以更详细的方式描述样式表要应用到哪种类型的输出设备上。幸运的是HTML4预见到了这种要求,并定义了向后兼容的媒体类型句法。这里有一段引用,来自HTML4第6.13节:

HTML的未来版本可能引入新的值,可能允许参数化的值。为了促进引入这些扩展,一致性的用户代理必须能够解析下面这些media元素属性值:

  1. 这个值是逗号分隔的条目列表。举个例子:
    media="screen, 3d-glasses, print and resolution > 90dpi"

    映射到:

    "screen"
    "3d-glasses"
    "print and resolution > 90dpi"
  2. 每个条目在第一个非US ASCII字母[a-zA-Z](Unicode decimal 65-90, 97-122、digit [0-9] (Unicode hex 30-39)、或hyphen (45))前面截断在这具示例中,给出了:
    "screen"
    "3d-glasses"
    "print"

如本规范文档所述,媒体查询建立在HTML概括的机制之上。媒体查询的句法,适应HTML4中保留的媒体类型句法。HTML4中的元素属性media也存在于XHTML和一般的XML中。这种样式的句法清空可以用在CSS的‘@media’规则和‘@import’规则中。

然而,针对媒体查询的解析规则与HTML4中的那些不兼容,因此它们与CSS中所用的媒体查询保持一致。

HTML5 [HTML5](在编写本规范文档时,这个工作还在进行中)直接引用了这个媒体查询规范文档,而且因此针对HTML更新了规则。

2. 媒体查询

一个媒体查询由一个媒体类型和零个或更多个检查特定的媒体特征条件的表达式构成。

在本章节中,有关于媒体查询的语句,假定是遵守句法章节的。在错误处理章节章节中讨论了不遵守这个句法的媒体查询。亦即,这个句法在本节中优先于需求。

这里有一些用HTML写的类似的示例:

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

这个示例表达了一个特定的样式表(example.css)应用到一个带有特定功能(它必须是彩色屏幕)的特定的媒体类型(‘screen’)的设备上。

这里是写在CSS中一个@import-rule中的一个相同的媒体查询:

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

一个媒体查询是一个逻辑表达式,要么是true要么是false。如果媒体查询的媒体类型匹配用户代理正在运行的设备的媒体类型(定义在“Applies to”行中),而且媒体查询中的所有表达式都是true,这个媒体查询就是true。

媒体查询提供了一个简写句法,应用到所有的媒体类型上;单词‘all’可以被遗忘(以及拖尾的‘and’)亦即,如果没有明确给出媒体类型,媒体就是‘all’。

亦即,这些是等同的:

@media all and (min-width:500px) { … }
@media (min-width:500px) { … }

这些也是等同的:

@media (orientation: portrait) { … }
@media all and (orientation: portrait) { … }

一个媒体查询列表中可以组合若干种媒体查询。一个逗号分隔的媒体查询列表。如果在逗号分隔列表中,一个或多个媒体查询是true,则整个列表都是true,否则就是false。在媒体查询句法中,逗号表达式是一个逻辑或,与此同时‘and’关键词表达了一个逻辑与。

这是在一个逗号分隔列表中用多种媒体查询的一个示例,使用CSS中的一个@media-rule规则:

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

如果媒体查询列表是空的(亦即,声明是空字符串,或者仅有一点空白构成)它等同于true。

亦即,这两者是等同的:

@media all { … }
@media { … }

可以通过关键词‘not’表达逻辑非。在媒体查询的开头出现关键词‘not’,反转了整个结果:亦即,如果不带关键词‘not’的媒体查询结果是true,带上关键词‘not’ 就会变成false,反之亦然。只支持媒体类型的用户代理(如HTML4中所描述的)不能识别关键词‘not’ ,而且因此也不会应用相关的样式表。

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

关键词 ‘only’还可以用来隐藏来自较旧的用户代理的样式表。用户代理必须处理用‘only’开始的媒体查询,就像关键词‘only’不存在。

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

媒体查询句法可以与HTML、XHTML、XML[XMLSTYLE]和CSS的@import规则、@media规则配合使用。

这里有一些示例,写在HTML、XHTML、XML、@import和@media中:

<link rel="stylesheet" media="screen and (color), projection and (color)" rel="stylesheet" href="example.css">
<link rel="stylesheet" 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) { … }

[XMLSTYLE]规范文档还没有更新以使用media伪元素属性中的媒体查询。

如果一个媒体特征没有应用到用户代理正在运行的设备上,引且这个媒体特征的表达式会是false。

媒体特征‘device-aspect-ratio’只能应用到视觉设备上。在听觉设备上,引用‘device-aspect-ratio’的表达式永远是false:

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

如果一个测量单位不能应用在这个设备上,表达式永远是false。

px’单位不能应用于‘speech’设备,所以下面的媒体查询永远是false:

<link rel="stylesheet" media="speech and (min-device-width: 800px)" href="example.css" />

注意,如果示例中的媒体查询在开头加了关键词‘not’,它就会是true。

为了避免循环依赖,没有必要应用样式表来评估表达式。举个例子,一个打印的文档可能受样式表的影响,但是引用‘device-aspect-ratio’的表达式针基于用户代理的默认宽高比。

用户代理期待响应用户的环境变化,重新评估重新布局网页,举个例子,如果设备从横屏模式旋转成竖屏模式,但是这并非必不可少。

3. 句法

CSS2语法中已经描述了媒体查询句法。因此,没有定义在这里的规则已经定义在CSS2中了。下面定义的media_query_list产品,代替来自CSS2的media_list产品。[CSS21]

media_query_list
 : S* [media_query [ ',' S* media_query ]* ]?
 ;
media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*
 ;
media_type
 : IDENT
 ;
expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
 ;
media_feature
 : IDENT
 ;

定义在CSS2中的COMMENT口令,没有出现在该语法中(为了保持可读性),但是任意个这些口令可能出现在任意两个其它口令的之间。[CSS21]

引入了下面的新定义:

L  l|\\0{0,4}(4c|6c)(\r\n|[ \t\r\n\f])?|\\l
Y  y|\\0{0,4}(59|79)(\r\n|[ \t\r\n\f])?|\\y

引入了下面的新口令:

{O}{N}{L}{Y}      {return ONLY;}
{N}{O}{T}         {return NOT;}
{A}{N}{D}         {return AND;}
{num}{D}{P}{I}    {return RESOLUTION;}
{num}{D}{P}{C}{M} {return RESOLUTION;}

CSS2的term产品中添加了RESOLUTION

CSS样式表通常是大小写不敏感的,因此媒体查询也是大小写不敏感的。

除了遵守这些句法,每个媒体查询需要使用媒体类型以及媒体特征,依照它们各自的规范文档,以遵循一致性。

在下面的示例中,只有第一个媒体查询是符合一致性的,因为并不存在"example"这种媒体类型。

@media all { body { background:lime } }
@media example { body { background:red } }

3.1. 错误处理

对于非一致性的媒体查询,用户代理需要本节讲述的规则。

4. 媒体功能

从句法上来说,媒体特征类似于CSS属性:它们具有名称,并可接受特定的值。然而,CSS属性和媒体特征之间有一些重要的不同之处:

举个例子,‘color’媒体特征可以形成不带有值的表达式(‘(color)’),或者带有一个值(‘(min-color: 1)’)。

这个规范文档定义了可用于视觉和触觉设备的媒体特征。类似地,也可以针对听觉媒体定义媒体特征。

4.1. 宽度

值:<length>
应用于:视觉和触觉媒体类型
是否接受min/max前缀:yes

width’媒体特征描述了输出设备的目标显示区域的宽度。对于连续媒体,这是视口(CSS2 9.1.1章节中描述了它 [CSS21])的宽度,包括了一个呈现的滚动条(如果有的话)。对于分页的媒体,这是页盒的宽度(CSS2 13.2章节中描述了它 [CSS21])。

一个指定的<length>不能是负数。

举个例子,这个媒体查询表达了样式表可用在宽于25厘米的打印输出设备上:

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

这个媒体查询表达了样式表可用在视口(屏幕或纸张上用于呈现文档的部分)宽度在400像素到700像素之间的设备上。

@media screen and (min-width: 400px) and (max-width: 700px) { … }

该媒体查询表达了样式表可用在屏幕上,以及手持设备上,如果视口的宽度大于20em。

@media handheld and (min-width: 20em), 
  screen and (min-width: 20em) { … }

em’的值是相对于‘font-size’的初始值。

4.2. 高度

值:<length>
应用于:视觉和触发媒体类型
是否接受min/max前缀:yes

height’媒体特征描述了输出设备的目标显示匹配的高度。对于连续媒体,这是视口的高度,包括了呈现的滚动条(如果有的话)的尺寸。 对于分页媒体,这是页面盒的高度。

一个指定的<length>不能是负数。

4.3. 设备宽度

值:<length>
应用于:视觉和触发媒体类型
是否接受min/max前缀:yes

媒体特征‘device-width’描述了输出设备呈现表面的宽度。对于连续媒体,这是屏幕的宽度。对于分页媒体,这是页面尺寸的宽度。

一个指定的<length>不能是负数。

@media screen and (device-width: 800px) { … }

在上面的示例中,样式表将应用到严格水平显示800像素的屏幕上。‘px’单位是逻辑种类,如单位章节所描述。

4.4. 设备高度

值:<length>
应用于:视觉和触发媒体类型
是否接受min/max前缀:yes

device-height’媒体描述了输出设备的呈现表面的高度。对于连续媒体,这是屏幕的高度。对于分页媒体,这是页面尺寸的高度。

一个指定的<length>不能是负数。

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

在上面的示例中,样式表将只应用于严格垂直显示600像素的屏幕。注意‘px’单位的定义与CSS的其它部分相同。

4.5. 方向

值:portrait | landscape
应用于:位图媒体类型
是否接受min/max前缀:no

当媒体特征的‘height’值大于或等于媒体特征的‘width’值时,媒体特征的 ‘orientation’值是‘portrait’。否则媒体特征的‘orientation’值是‘landscape’。

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

4.6. 宽高比

值:<ratio>
应用于:位图媒体类型
是否接受min/max前缀:yes

媒体特征‘aspect-ratio’被定义为媒体特征 ‘width’和媒体特征‘height’的比值。

4.7. 设备宽高比

值:<ratio>
应用于:位图媒体类型
是否接受min/max前缀:yes

媒体特征‘device-aspect-ratio’被定义为媒体特征‘device-width’和媒体特征‘device-height’比值。

举个例子,如果带有正方形像素的屏幕设备具有1280水平像素以及720垂直像素(亦即宽高比是“16:9”),以下的媒体查询将匹配这个设备:

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

4.8. 颜色

值:<integer>
应用于:视觉媒体类型
是否接受min/max前缀:yes

媒体特征‘color’描述了输出设备的每种颜色成分的字节数。如果该设备不是彩色设备,这个值是0。

一个指定的<integer>不能是负数。

举个例子,这两个媒体查询表达了样式表应用到所有彩色设备上。

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

这个媒体查询表达了样式表应用到每个颜色成分超过2字节的彩色设备上:

@media all and (min-color: 2) { … }

如果不同的颜色成分用不同的字节数代表,则使用最小的数字。

举个例子,如果8位颜色系统代表了3位红色成分、3位绿色成分和2位蓝色成分,则媒体特征‘color’的值是2。

在带索引色的设备上,使用在查询表中每种颜色成分的最小数字。

这个描述的功能只能够描述表面层次上的颜色功能。如果需要进一步的功能,RFC2531 [RFC2531]提供了更专一的媒体特征,它会在以后的舞台上受支持。

4.9. 颜色索引

值:<integer>
应用于:视觉媒体类型
是否接受min/max前缀:yes

媒体特征‘color-index’描述了输出设备的颜色查找表中的条目数。如果这个设备没有使用一个颜色查找表,这个值就是0。

一个指定的<integer>不能是负数。

举个例子,只有两种方法表达一个样式表应用到全色索引设备上:

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

这个媒体查询表达了一个样式表应用到一个颜色索引设备上,带有256条或更多的条目:

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

4.10. 单色

值:<integer>
应用于:视觉媒体类型
是否接受min/max前缀:yes

媒体特征‘monochrome’描述了在单色框架缓冲中,每像素的字节数。如果设备不是单色设备,这个输出设备值将是0。

一个指定的<integer>不能是负数。

举个例子,这里有两个不同的方法,表达一个样式表应用到所有单色设备上:

@media all and (monochrome) { … }
@media all and (min-monochrome: 1) { … }

表达了一个应用到单色设备上的样式表,而且每像素超过2字节:

@media all and (min-monochrome: 2) { … }

表达了只有一个样式表用于彩色网页,别的都用于单色网页:

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

4.11. 分辨率

值:<resolution>
应用于:位图媒体类型
是否接受min/max前缀:yes

媒体特征‘resolution’描述了输出设备的分辨率,亦即,像素的密度。如果带有非正方形像素的查询设备,在查询‘min-resolution’必须与最低密度维度作比较,而在查询‘max-resolution’中则必须与最高密度维度作比较。一个‘resolution’查询(不带有“min-”前缀或“max-”前缀)永远不会匹配一个非正方形像素的设备。

对于打印机,它对应于屏幕分辨率(任意颜色的打印点的分辨率)。

举个例子,这个媒体查询表达式是一个样式表,可用在分辨率大到300点每英寸的设备上:

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

这个媒体查询表达了一个样式表可以用在分辨率大于118点每厘米的设备上:

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

4.12. 扫描

值:progressive | interlace
应用于:"tv"媒体类型
是否接受min/max前缀:no

媒体特征‘scan’描述了“tv”输出设备的扫描过程。

举个例子,这个媒体查询表达式是一个样式表,可用在带有进程扫描的tv设备上:

@media tv and (scan: progressive) { … }

4.13. 网格

值:<integer>
应用于:视觉和触发媒体类型
是否接受min/max前缀:no

媒体特征‘grid’用来查询输出设备是网格还是位图。如果输出设备是基于网格的(例如,一个“tty”终结,或者一个手机显示器,只有固定的字体),这个值会是1。否则,这个值会是0。

有效值只有0或者1。(这包括-0。)因此除此之外的别的值都会造成一个畸形的媒体查询。

这里有两个示例:

@media handheld and (grid) and (max-width: 15em) { … }
@media handheld and (grid) and (device-max-height: 7em) { … }

5. 值

本规范文档还引入了两个新值。

<ratio>是一个正整数(非零非负),后面跟着可选的空格、跟着一个斜线(‘/’),再跟着一个可选的空格,再跟着一个正整数。

<resolution>的值是一个正<number>后面紧跟着一个单位标识符(‘dpi’或者‘dpcm’)。

本规范文档所用的空白、<integer>和其它值与CSS的其它部分相同,CSS 2.1规范地定义了它们。[CSS21]

6. 单位

媒体查询所使用的单位和CSS的其它部分相同。举个例子,像素单位代表了CSS像素 ,而不是物理像素。

媒体查询中的相对单位基于初始值,它意味着单位不会基于声明的结果。举个例子,在HTML中,‘em’相对于‘font-size’的初始值。

6.1. 分辨率

dpi’和‘dpcm’这两个单位描述了一个输出设备的分辨率,亦即,设备的像素密度。分辨率单位标识符是:

dpi
每英寸的点数。
dpcm
每厘米的点数

在本规范文档中,这些单位只能用在‘resolution’媒体特征中。

鸣谢

这个规范文档是W3C层叠样式表工作小组的成果。

来自下面这些人的建议,帮助改变了这个规范文档:Björn Höhrmann、Christoph Päper、Chris Lilley、Simon Pieters、Rijk van Geijtenbeek、Sigurd Lerstad、Arve Bersvendsen、Susan Lesch、Philipp Hoschka、Roger Gimson、Steven Pemberton、Simon Kissane、Melinda Grant和L. David Baron。

参考资料

标准化参考资料

[CSS21]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607

其它参考资料

[HTML401]
Dave Raggett; Arnaud Le Hors; Ian Jacobs. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224
[HTML5]
Ian Hickson. HTML5. 29 March 2012. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2012/WD-html5-20120329/
[RFC2531]
G. Klyne; L. McIntyre. Content Feature Schema for Internet Fax. March 1999. Internet RFC 2531. URL: http://www.ietf.org/rfc/rfc2531.txt
[XMLSTYLE]
James Clark; Simon Pieters; Henry S. Thompson Associating Style Sheets with XML documents 1.0 (Second Edition) 28 October 2010. W3C Recommendation. URL: http://www.w3.org/TR/2010/REC-xml-stylesheet-20101028/