7 媒体类型

内容

7.1 媒体类型简介

样式表一个最重要的特性就是它们能指定一个文档在不同的媒体上怎样展示：在屏幕上，纸上，用语音合成器，用盲文设备等等

某些CSS属性是专门为特定媒体设计的（例如，'page-break-before'属性只适用于分页媒体）。然而，有时针对不同媒体类型的样式表可能会共享一个属性，但需要不同的属性值。例如，'font-size'属性在屏幕和打印媒体上都有效。这两种不同的媒体需要不同的属性值，典型的，一个文档将需要电脑屏幕上的字体比纸上的更大。因此，有必要指定一个样式表或者样式表的一部分应用于特定媒体

7.2 指定媒体依赖的样式表

目前有两种方式来指定样式表的媒体依赖：

通过@media或者@import两种@规则来指定一个样式表的目标媒体

@import url("fancyfonts.css") screen;
@media print {
  /* style sheet for print goes here */
}

通过文档语言指定目标媒体。例如，HTML 4（[HTML4]）中，LINK元素的"media"属性指定了一个外部样式表的目标媒体：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>Link to a target medium</TITLE>
      <LINK REL="stylesheet" TYPE="text/css" 
	 MEDIA="print, handheld" HREF="foo.css">
   </HEAD>
   <BODY>
      <P>The body...
   </BODY>
</HTML>

@import规则定义在层叠章节

7.2.1 @media规则

一条@media规则指定了一堆语句（用花括号分隔）的目标媒体类型。4.1.7 “规则集，声明块与选择器”和4.2 “处理解析错误的规则”中的每个非法语句必须被忽略掉。@media结构允许同一样式表中含有针对各种媒体的样式规则：

  @media print {
    body { font-size: 10pt }
  }
  @media screen {
    body { font-size: 13px }
  }
  @media screen, print {
    body { line-height: 1.2 }
  }

@media规则之外的样式规则应用于样式表适用的所有媒体类型。@media内部的@规则在CSS2.1中是非法的

7.3 可识别的（Recognized）媒体类型

CSS媒体类型的名称反映了相关属性生效的目标设备。下列CSS媒体类型中，媒体类型名是规范的，但描述信息是信息性的。同样的，每个属性描述信息中的"Media"字段也是信息性的

all: 适用于所有设备
braille: 用于盲文触觉反馈设备
embossed: 用于分页盲文打印机
handheld: 用于手持设备（典型的小屏幕，有限带宽）
print: 用于分页资料和在屏幕上用打印模式查看的文档。关于具体分页媒体格式化问题的更多信息，请查看分页媒体章节
projection: 用于投影展示，例如投影仪。关于具体分页媒体格式化问题的更多信息，请查看分页媒体章节
screen: 主要用于彩色计算机屏幕
speech: 用于语音合成器。注意：CSS2有一个类似的目的相同的媒体类型叫'aural'。详细信息见附录听觉（aural）样式表
tty: 用于使用固定间距（fixed-pitch）字符网格的媒体（例如，电传打字机，终端设备或者显示功能受限的便携式设备）。编写者不应该对"tty"媒体类型使用像素单位
tv: 用于电视类（television-type）设备（低分辨率，彩色，滚动受限的屏幕，支持音频）

媒体类型名是大小写不敏感的

在有些场景下，媒体类型是互斥的，用户代理渲染一份文档时只会支持一种媒体类型。然而，用户代理可能对不同的画布（canvases）用不同的媒体类型。例如，一份文档可能（同时）被用'screen'模式展示在一块画布上并用'print'模式展示在另一块画布上

注意，多模式（multimodal）媒体类型仍然只是一种媒体类型。例如，'tv'媒体类型是一种多模式媒体类型，在单一画布上既进行视觉渲染又进行听觉渲染

带有未知媒体类型（虽然是合法的标识符）的@media和@import规则被当作就像未知媒体类型没有出现一样。如果一个@media/@import规则含有一个格式错误的媒体类型（不是一个标识符），那么该语句是非法的

注意：媒体查询代替了这种错误处理

例如，下列代码片段中，P元素上的规则适用于'screen'模式（即使'3D'媒体类型是未知的）

@media screen, 3D {
  P { color: green; }
}

注意 CSS更新版本的特性可能会扩展媒体类型列表。编写者不应该依赖CSS规范中尚未定义的媒体类型名

7.3.1 媒体组

本节是信息性的，非规范

每个CSS属性定义都指定了属性适用于哪种媒体类型。因为属性一般适用于好几个媒体类型，每个属性定义中的"Applies to media"列出了媒体组而不是个别媒体类型。每个属性适用于其定义中媒体组中列出的所有媒体类型

CSS 2.1定义了下列媒体组：

continuous或者paged
visual，audio，speech或者tactile
grid（对于字符网格设备）或者bitmap
interactive（对于允许用户交互的设备）或者static（对于那些不支持（用户交互）的）
all（包括所有媒体类型）

下表展示了媒体组合媒体类型之间的关系：

Relationship between media groups and media types
Media Types	Media Groups
	continuous/paged	visual/audio/speech/tactile	grid/bitmap	interactive/static
braille	continuous	tactile	grid	both
embossed	paged	tactile	grid	static
handheld	both	visual, audio, speech	both	both
print	paged	visual	bitmap	static
projection	paged	visual	bitmap	interactive
screen	continuous	visual, audio	bitmap	both
speech	continuous	speech	N/A	both
tty	continuous	visual	grid	both
tv	both	visual, audio	bitmap	both