Css-Xml-Xhtml | 為自己的訪問者提供一個印表機友好的Web頁面

如果你願意放棄照顧老版本的瀏覽器，並假設你的使用者正在使用支援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）》。