CSS2/media

From HTML5 Chinese Interest Group Wiki
Jump to: navigation, search

媒介型態

内容概要

媒体类型介绍

样式表的一大重要特性就是指定文档如何呈现在不同媒体之中,这些媒体包含:屏幕、纸张、语音合成器以及盲文设备等。

某些CSS属性仅为特定媒体设计(例如: ‘page-break-before’属性仅适用于分页媒体)。尽管有时适用于不同媒体类型 的样式表可能共享一个属性,但它们需要不同的值。举例说明, ‘font-size’属性同时适用于屏幕和印刷媒体。两个媒体类型的差异造成通用属性需要不同的值;通常一个文档在计算机屏幕上需要比纸张上更大的字体。因此,显然需要在特定媒体类型上应用一个样式表或样式表章节。

指定媒体相关的样式表

通常存在两只指定媒体相关样式表的方法:

  • 在样式表中使用 @media 或 @import 按照规则指定目标媒体。
 @import url("fancyfonts.css") screen;
 @media print {
   /* 适用于印刷的样式 */
 }
  • 在文档语言中指定目标媒体。例如,在[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规则定义在层叠章节。

@media 规则

@media 规则指定一段语句集合(由花括号分界)的目标媒体类型(逗号分隔)。 按照4.1.7 “规则集、声明块及选择器”4.2 “解析錯誤的處理規則”,必须忽略无效语句。@media 概念允许在同一个样式表中为不同媒体定义样式表规则:

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

在 @media 规则之外的样式规则应该应用于样式表所应用的所有媒体类型。 @media 中的 At-规则在 CSS2.1 中无效。

公认的媒体类型

被选作CSS媒体类型的名称反映有关属性意义的目标设备。在下面的CSS媒体类型列表中,媒体类型的名称是规范的,但描述是信息的。同样的,每个属性的描述中的“媒体”字段也是信息的。

all(所有)
适用于所有设备。
braille(盲文)
用于盲文触摸反馈设备。
embossed(凸字)
用于分页盲文印刷。
handheld(手持)
用于手持设备(小屏幕、有限贷款)。
print(印刷)
用于分页材料以及打印预览模式下在屏幕上的文档视图。为分页媒体指定的 格式问题请参与分页媒体章节。
projection(投影)
用于投影演示文稿,例如投影仪。为分页媒体指定的格式问题请参与 分页媒体章节。
screen(屏幕)
主要用于彩色计算机屏幕。
speech(语音)
用于语音合成器。
注:CSS2 中有一个类似的媒体类型,其成为 “aural(听觉)”,详见附录

tty(电传打字机)
用于使用等宽字符的媒体(例如电传打字机、终端、显示能力有限的便携设 备)。编码人员不应在“tty”媒体类型中使用 像素单位
tv(电视)
用于电视机类型设备(低分辨率、颜色、限制滚动能力、声音有效)。

媒体类型名称不区分大小写。

在某种意义上媒体类型是互斥的,用户代理在渲染一个文档时仅能支持一种媒体类型。然而,用户代理可能会在不同的画布上使用不同的媒体类型。举例说明,一个文档可能会在一个画布上使用“screen”模式展示同时在另一个画布上使用“print”模式展示。

注意一个混合媒体类型仍然仅为一个媒体类型。举例说明,“tv”媒体类型是一个混合媒体类型,它同时在一个画布上进行视觉上和听觉上的渲染。

未知媒体类型(但是为有效标识符)的 @media 和 @import 规则按照未知媒体类型不存在来进行处理。如果一个 @media/@import 规则包含一个畸形媒体类型(不是一个标识符)则语句无效。

注:媒体查询取代这些错误处理。

举例说明,在下列片段中,P 元素上的规则应用在“screen”模式下(尽管“3D”媒体类型未知)。

 @media screen, 3D {
   P { color: green; }
 }
注:未来对CSS的更新可能会扩展媒体类型的列表。编码人员不应使用尚未在CSS规范中定义的媒体类型名称。

媒体组

本节内容是信息的,不规范。

每个CSS属性都定义该属性将要应用到的媒体类型。由于属性通常会应用于多个媒体类型,每个属性的“应用至媒体”片段定义了一个媒体组列表而不是单一媒体类型。每个属性都应用于其定义的媒体组中的所有媒体类型。

CSS 2.1 定义了下列媒体组:

  • continuous(连续)paged(分页).
  • visual(视觉)audio(音频)speech(语音)tactile(触觉)
  • grid(网格)(等宽字符设备)或bitmap(位图)
  • interactive(交互式)(允许用户交互的设备)或static(静态)
  • all(所有)(包含所有媒体类型)。

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

媒体类型 连续/分页 视觉/音频/语音/触觉 网格/位图 交互式/静态
盲文 连续 触觉 网格 全部
凸字 分页 触觉 网格 静态
手持 全部 视觉、音频、语音 全部 全部
印刷 分页 视觉 位图 静态
投影 分页 视觉 位图 交互式
屏幕 连续 视觉、音频 位图 全部
语音 连续 语音 N/A 全部
电传打字机 连续 视觉 网格 全部
电视 全部 视觉、音频 位图 全部