用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和媒体类型的想法和经验。

责任编辑：德东

查看本文国际来源