如果你愿意放弃照顾老版本的浏览器,并假设你的用户正在使用支持CSS2的浏览器(比如说IE5及以上版本或者Netscape 6及以上版本),你可以使用新的all媒体描述符来极大地简化CSS代码。

下面就是使用CSS2媒体描述符的链接的例子:

<link rel="stylesheet" type="text/css" media="all" href="mysite-all.css" />
<link rel="stylesheet" type="text/css" media="print" href="mysite-print2.css"
/>

这些链接几乎和前面的完全一样;不同之处在于CSS文件里包含有用于打印媒体的样式。

CSS文件里同media="all"联系在一起的样式可以应用于屏幕显示、打印,以及其他所有的媒体,所以你可以把所有创建的样式都放到这个文件里。同media="print"单独联系在一起的CSS文件可以小得多,因为页面从所有的媒体文件继承了所有的样式,这就没有必要再复制打印媒体文件里的这些样式了。

打印媒体CSS文件里唯一需要的样式是那些为打印输出而更改或者添加页面样式。一般来说,这只不过是一些禁止显示包含有图形和导航内容的div的样式,和把主体标签以及主要div的宽度和空白设置替换成适合打印输出的设置。

这个技巧能够起作用是因为所有的媒体CSS文件和打印媒体CSS文件都组合成了相同的层叠样式规则。因此,对这些CSS文件的链接顺序相当重要。所有的媒体文件链接都必须要放在打印媒体文件链接之前。

下面是一些关于使用打印媒体CSS文件的提示:

  • 如果禁止某个div的显示,就要使用display: none而不能用visibility: hidden。
  • 点(pt)和英寸(in)都不是用于屏幕显示的正确度量单位,但是它们是打印输出的正确度量单位。
  • 在打印媒体文件里使用的选择器要和你在所有媒体文件里使用的选择器完全相同。例如,如果你使用div#sidenav来选择所有媒体文件里id为sidenav的div,那么在打印媒体文件里使用#sidenav就可能无法成功地达到你的目的。
  • 不要忘记明确地强制替代从一个文件到另一个文件都会发生改变的规则声明。例如,如果你在所有的媒体文件里为一个元素设置了padding,并希望在打印输出里去掉这个padding,那么在打印媒体文件里加入一个忽略padding声明的样式是不够的——你必须明确地设置padding: 0pt,以取代前面的设置。
  • 如果你正在使用诸如Dreamweaver这样的图形编辑器,你就可以预览生成页面的屏幕效果,而不是打印输出的效果。要在Dreamweaver的设计(Design)查看窗里预览打印样式,就要把到打印媒体CSS文件的链接改成media="screen"。这就让你可以预览打印媒体文件里的CSS样式。不要忘了在发布你的页面之前把媒体描述符改回到media="print"。

当你需要为自己的访问者提供一个打印机友好的Web页面,你不再需要为原有的页面创建一个单独的版本。添加一个对带有media="print"媒体描述符的CSS样式表的链接,就能够把任何XHTML/CSS页面转换成为一个打印机友好的页面。


本文作者:Michael Meadhra在Web发展的最初阶段就在这一领域从事开发。他出版的书已累积几十种,包括即将上市的由Osborne/McGraw-Hill发行的《如何用Dreamweaver MX 2004做到一切(How to Do Everything with Dreamweaver MX 2004)》。

Copyright © 2022 瞳孔
Powered by .NET 6 on Kubernetes