代码改变世界

CSS2.1 媒体类型

2010-12-24 18:21  子冬  阅读(336)  评论(0)  编辑  收藏  举报

7 Media types媒体类型 7.1 Introduction to media types 介绍媒体类型 One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc. 样式表的一个重要特性是其指定了在不同的媒体上一个文档如何呈现：例如在屏幕上，纸上，复读机上，盲人设备上，等等。 Certain CSS properties are only designed for certain media (e.g., the 'page-break-before' property only applies to paged media). On occasion, however, style sheets for different media types may share a property, but require different values for that property. For example, the 'font-size' property is useful both for screen and print media. The two media types are different enough to require different values for the common property; a document will typically need a larger font on a computer screen than on paper. Therefore, it is necessary to express that a style sheet, or a section of a style sheet, applies to certain media types. 某些CSS属性是专门针对某些媒体来设计的（例如，'page-break-before'属性只可以被应用在连续媒体上）。然而，有时不同媒体类型之间的样式表可以共用一个属性，但是需要设置不同的属性值。例如，'font-size'属性可以同时应用在屏幕和打印媒体上，且这两个媒体的一般属性都需要设置不同的值。因此，有必要为每个样式表或某段样式指定某个媒体类型。 7.2 Specifying media-dependent style sheets 指定媒体类型 There are currently two ways to specify media dependencies for style sheets: 当前有两种办法指定样式表的媒体类型：

  • Specify the target medium from a style sheet with the @media or @import at-rules. 通过@media或@import规则指定样式表的目标媒体类型

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

  • Specify the target medium within the document language. For example, in HTML 4 ([HTML4]), the "media" attribute on the LINK element specifies the target media of an external style sheet: 在文档语言中指定媒体类型。例如，在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>

The @import rule is defined in the chapter on the cascade. @import规则定义在chapter on the cascade。

7.2.1 The @media rule @media规则 An @media rule specifies the target media types (separated by commas) of a set of statements (delimited by curly braces). Invalid statements must be ignored per 4.1.7 "Rule sets, declaration blocks, and selectors" and 4.2 "Rules for handling parsing errors." The @media construct allows style sheet rules for various media in the same style sheet: 一个@media规则指定了某个代码块（放在花括号内）的媒体类型（媒体类型用逗号分隔）。根据4.1.7 "Rule sets, declaration blocks, and selectors" and 4.2 "Rules for handling parsing errors." 无效的代码会被忽略. @media允许在同一个样式表中为不同的媒体类型定义不同的样式： @media print { body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen, print { body { line-height: 1.2 } } Style rules outside of @media rules apply to all media types that the style sheet applies to. At-rules inside @media are invalid in CSS2.1. @media规则外的样式将会被应用到所有媒体上。@media内的样式在CSS2.1中无效。 7.3 Recognized media types 经过认可的媒体类型 The names chosen for CSS media types reflect target devices for which the relevant properties make sense. In the following list of CSS media types the names of media types are normative, but the descriptions are informative. Likewise, the "Media" field in the description of each property is informative. 所选择CSS媒体类型的名称将决定在目标设备上那些相关属性会有意义。下面列表中CSS媒体类型的名字是标准媒体类型，但是这些描述只是简单的说明。同样，描述中"Media"领域的每个属性也只是一些描述性说明。 all Suitable for all devices. 适合所有设备 braille Intended for braille tactile feedback devices. 用于盲字触摸反馈设备 embossed Intended for paged braille printers. 用于盲字打印设备 handheld Intended for handheld devices (typically small screen, limited bandwidth). 用于掌上设备（代表性的小屏幕，小带宽设备） print Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media. 用于连续媒体或屏幕文档的打印预览。请查看paged media章节关于指定分页媒体的格式化信息。 projection Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media. 用于投影显示设备，例如投影机。请查看paged media章节关于指定分页媒体的格式化信息。 screen Intended primarily for color computer screens. 用于计算机彩色屏幕 speech Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details. 用于语音同步器。注意：CSS2有一个一样的媒体类型叫做'aural'。请查看附录aural style sheets获取详细信息。 tty Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type. tv Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available). 用于电视设备（适用于低分辨率，有颜色，限制滚动的屏幕，有声音的设备） Media type names are case-insensitive. 媒体类型不区分大小写。 Media types are mutually exclusive in the sense that a user agent can only support one media type when rendering a document. However, user agents may use different media types on different canvases. For example, a document may (simultaneously) be shown in 'screen' mode on one canvas and 'print' mode on another canvas. 当渲染一个文档时，浏览器只可以支持一种媒体类型，也就是说媒体类型之间的作用应该是互相排斥的。然而，在不同的画布上浏览器可以应用不同的媒体类型。例如，一个文档可以显示'screen'模式在一个画布上，同时也可以使用使用'print'模式在其他画布上。 Note that a multimodal media type is still only one media type. The 'tv' media type, for example, is a multimodal media type that renders both visually and aurally to a single canvas. 注意一个多媒体只能使用一个媒体类型。例如，'tv'是一个多媒体，他可以在一个画布上同时渲染视觉和听觉效果。 @media and @import rules with unknown media types (that are nonetheless valid identifiers) are treated as if the unknown media types are not present. If an @media/@import rule contains a malformed media type (not an identifier) then the statement is invalid. 对于不能识别的@media 和 @import规则将不会被显示出来。如果一个@media/@import规则包含一个畸形的媒体类型，该规则包含的代码块将无效。 Note: Media Queries supercedes this error handling. 注意：查询媒体将会对这种情况做错误处理。 Example(s): For example, in the following snippet, the rule on the P element applies in 'screen' mode (even though the '3D' media type is not known). 例如，下面的代码块中，P元素的规则被应用在'screen'模式（即使'3D'媒体类型不能够识别）。 @media screen, 3D { P { color: green; } } Note. Future updates of CSS may extend the list of media types. Authors should not rely on media type names that are not yet defined by a CSS specification. 说明：CSS将来的更新可能会扩展媒体类型的列表。作者可以应用这个说明中没有定义的媒体类型。 7.3.1 Media groups 媒体组 This section is informative, not normative. 这章为信息性描述，属于非标准。 Each CSS property definition specifies which media types the property applies to. Since properties generally apply to several media types, the "Applies to media" section of each property definition lists media groups rather than individual media types. Each property applies to all media types in the media groups listed in its definition. 每个CSS属性的定义都指定了该属性可以被应用到那个媒体类型上。因为属性一般可以被应用到几个不同的媒体类型上，所以每个属性定义中"Applies to media"章节将列举出支持的媒体组而不是一个媒体类型。每个属性将支持其定义时所指定媒体组中的所有媒体类型。 CSS 2.1 defines the following media groups: CSS2.1定义了下面媒体组：

  • continuous or paged. 连续或分页媒体
  • visual, audio, speech, or tactile. 可视化，音频，语音，触摸设备
  • grid (for character grid devices), or bitmap. 表格或位图
  • interactive (for devices that allow user interaction), or static (for those that do not). 交互式媒体
  • all (includes all media types) 所有媒体类型

The following table shows the relationships between media groups and media types: 下面的表格展示了媒体组和媒体类型之间的关系：

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


说明：本站所有W3C翻译文稿皆为原创，如果转载，请大家注明出处，谢谢。