利用CSS的媒体类型满足访客需求


除了需要考虑不同的浏览器和Web标准之外,你更需要考虑的是浏览站点的设备或者媒体的多样性。CSS媒体类型提供创建Web应用软件的功能,它能随目标媒体的变化而变化。本文将用一些例子检查这个CSS特点。

媒体

CSS媒体类型指定了一组CSS属性。那些声称能够支持媒体类型的用户代理必须实现所有的属性,才能将这些属性应用于那个媒体类型。样式表使你能够指定在不同的媒体上如何将文件显示出来。例如,在屏幕上浏览一个页面,应该与打印页面,或者是通过语音合成器为视觉障碍用户播放页面的时候不同。

下面是目前支持的媒体类型的清单:

All:可应用于所有的媒体类型
Aural:使用语音合成器
Braille:提供支持盲人触觉反馈设备
Embossed:可用于盲人打印机
Handheld:支持小型的或者带狭窄屏幕空间的手持设备
Print:应用于打印机,所以用户能轻松打印页面的内容
Projection:可用于项目介绍,像幻灯片一样
Screen:Web内容最普通的显示装置:计算机屏幕
Tty:媒体可使用固定大小的字符栅格,例如teletypes和终端
Tv:应用于像电视这样的设备,比如WebTV
记住这些媒体类型,你可以开发出分离的样式表,这样就能让使用不同媒体的用户都能访问你的站点。

特定媒体样式表Media-specific CSS

你可以用各种各样的方法指定不同媒体类型。首先,你可以通过@import规则将外部样式表导入来指定媒体类型,下面的这条语句是基于tv设备的,它通过导入指定的样式表来完成功能。

@import url("webtv.css") tv;

你可以使用@media规则为Web页面中某些媒体类型提供显示规则。下面这条语句针对tv类型设备,使用@media规则将背景颜色设置为白色:

@media tv {

background: #fff;

}

Link HTML元素允许你连接到外部的样式表,这样你就可以使用媒体属性来指定连接的目标媒体样式。下面的这条语句告诉你该如何使用这种方式:

<LINK rel="stylesheet" type="text/css" media="tv" href="tv.css">

不管你使用哪种方法你都可以指定多个媒体类型,你只需要用逗号将各个媒体类型分开即可。例如,用下面这条语句,就先前的HTML示例而言,既可以重新写到tv类型的媒体中,也可以写到projection类型媒体中。

<LINK rel="stylesheet" type="text/css" media="tv, projection" href="tv.css">

应用

因为支持不同的媒体类型,所以你能将各种设备或者可获得的媒体类型内容格式化。一个很好的例子就是打印,打印输出的时候,像菜单和工具条这样的项目都被忽略了(经常使用显示:none)。TechRepublic的Shawn Morton在先前的文章中提供了一个非常好的关于创建友好打印页面的评论。

下面的CSS是一个针对不同媒体类型格式化内容的简单例子。在规则的屏幕上将背景颜色设置成蓝色,在打印机或者手持输出设备上,将背景颜色设置成白色。同样,在打印机和更小的手持设备上,将字体大小设置成更容易读的12 point。在所有的媒体类型上,字体类型都设置成相同的类型。

<style type="text/css">

@media all {

font-family: sans-serif;

}

 

@media handheld {

body {

border: none;

padding-bottom: 5px;

font-size: 8pt;

background: white;

}

h1, h2 {

font-size: 10pt;;

} }

 

@media screen {

body {

background: blue;

font-size: 10pt;

} }

 

@media print {

body {

width: auto;

margin: 0 5%;

padding: 0;

font-size: 12pt;

} }

</style>

在现实世界的应用软件中,每一种媒体类型样式表的大小都比这个简单例子的大,所以将每种媒体类型放置在不同的文件中,可以使用Link元素进行连接,这样就能减少代码的下载量并节省带宽。对于任何Web标准来说,一个最重要的问题就是它的支持问题。

支持

CSS媒体类型是CSS2标准的一部分,但是浏览器对它的支持并不太快。所有媒体类型的值,在屏幕和打印机都能很好的支持,但是保留类型却只被有限的浏览器所支持。你应该充分地进行测试,以保证结果能与目标平台上的浏览器所匹配。

现在,手持媒体类型已经被一些设备和软件所支持,所以你应该测试目标设备是否支持媒体类型。Opera浏览器支持projection媒体类型,但是在Opera外的支持却是有限的。支持像braille,tv,tty,embossed和aural这样的其它媒体类型几乎不存在。Emacspeak浏览器使用了aural媒体类型。

了解你的观众

CSS2规范包括媒体类型特点,在这种规范中允许开发人员通过样式表对某个媒体类型内容进行裁剪。这个特点已经得倒了打印和屏幕类型的完全支持,然而对于其它类型的支持就有点不协调了,有时候甚至不能支持。与此同时,CSS3标准将向提高媒体类型特点的方向继续前进。

在你的Web应用软件中是否已经支持媒体类型了呢?你可以通过在Web开发社区中发表帖子和文章,来与大家一起分享你关于CSS和媒体类型的想法和经验

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3