5.5.1 媒体类型:康复的开始


5.5 超越浏览器的CSS


用现代桌面浏览器浏览您的页面时,您的页面看起来相当吸引人。我们已经有不同的方法允许用户改变站点的表现层。这个文档在浏览器之外的环境将会如何?当试图打印一


我们应该从根本上为页面的打印版本进行单独的设计。这个设计不但强调样式的易读性,在美学上也不能有什么缺陷。但这带来不小的额外工作。页面具有仅用于打印的独立版本的时代仍没来临。要设计单一的页面和设计全面的页面保持同步,不仅费时还费资源,这常常需要编写很复杂的脚本、花大量时间进行手工编辑。


5.5.1 媒体类型:康复的开始


CSS规范的作者预见到了这个问题。他们引入了“媒体类型”这样一个概念,这是一种样式表分类手段,通过媒体类型可以把不同设计发送到不同的设备,如打印机、计算机显示器、屏幕阅读器、Internet掌上设备等。只需把三个link元素打上如“屏幕(screen)”这样的标记,就可以使这个设计只送到全图形的浏览器(如IE和Firefox),这样就能避免前面遇到的一些不愉快情况。要达到这个目的,只需把link元素的media属性设置为screen:






 

现在在打印视图下预览该文档,结果就大不一样了,如图5-9所示。


看起来并不理想,但这也是一个进步。通过在链接中添加属性media="screen",就可把设计与使用环境(浏览器)结合起来。因此用户在不同媒体类型(如打印机)中浏览时,看到的就是没有任何样式的原始内容。


说明:


也可以给某个link元素指定多种媒体类型。例如,当以全屏浏览模式进行浏览时,Opera浏览器(http://www.opera.com)就会切换到“投影”媒体类型。因此忽略专门为“屏幕”媒体设计的CSS。如果希望在投影环境下重用屏幕样式表,可以将其添加在media属性后并用逗号隔开:<link rel="stylesheet" href="main.css" type="text/css" media="screen,projection" />。






 

相当简单,对吗?在创建用于打印的样式表时,可以使用全书所介绍的相同语法和策略。不论是应用到浏览器还是纸张上,它仍然是CSS。不过得承认,在为打印设计时需要考虑下列情况:


字体大小控制——用点控制字体大小,这或许是针对打印的样式表最吸引人的地方。虽然点是字体大小的绝对度量,但可以用点显示打印样式。在针对屏幕设计时,要避免使用点带来的麻烦,因为浏览器对点大小的呈现是不一致的。然而针对打印使用点是比较理想的。


剔除无用部分——标记的某些部分可能不必在打印结果中体现。例如,您可能希望在打印时不打印那个丑陋的杯子。当然针对浏览器的样式表切换器,所有链接完全不用点。针对打印的样式表,可以简单地指定img.portrait, #switcher { display: none; }。通过媒体类型的帮助,这两个元素在屏幕上仍然可用,但在针对打印的版本中则被删除。


创建了针对打印的样式表后,把它包含在文档的head部分。和往常一样,可以用一个链接来实现,但要额外注意的是,要指定正确的媒体类型——即print。






 



标签:
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2