星期六, 11月 11, 2006

CSS是什麼:對應多種瀏覽格式

你列印過你的網站嗎?

網頁可以用電腦的網頁瀏覽器觀賞,也可以藉由瀏覽器列印下來,但是,不是所有的瀏覽者都擁有一流的列表機。而有時候瀏覽者不想列印那些極盡華麗的圖片效果,瀏覽者列印時想到的是可以參考的資料與文字。

其實,很多網頁沒有辦法讓你完整列印頁面,比方左圖,這是瀏覽 Hinet 新聞網頁時,預覽列印與網頁瀏覽的比對情況。可以看見,預覽列印時右邊被消去一大塊, Internet Explorer 列印時不會把頁面內容與紙張做寬度處理,所以一旦超過紙張寬度就會列印不出來。

你用過手持式螢幕閱覽過你的網站嗎?

現在,即使是低價的手機,也都多半都開始具備可以上網的功能,我的手機 nokia6020 就可以看網頁,加上H業者的GPRS門號,及每月繳最多 249 元的月租費就可以無限上網看網頁,不過除了wap網頁以外, 一般 http 的網頁,看起來就有如右圖一般(右圖是用Opera瀏覽器模擬小螢幕閱覽時,觀看 Hinet 新聞的網頁),像是被地震侵襲過一樣,破爛不堪。

或許有人會懷疑用手機看網頁會不會太小了,事實上,我常常在火車上用手機看新聞網頁。跟報紙比起來,手持式螢幕的文字大小不會比報紙小,所以閱讀起來不會很吃力。手持式閱讀文章只需由上往下、由左往右的閱讀,而不像報紙,為了將訊息塞入一張半版紙張中,產生很多種閱讀方法的排版。又,即使現在,有針對通勤族為目標,縮小報紙版面的蘋果爽報,但只需要用一隻手就能閱讀新聞得手持式螢幕,還是最輕鬆的閱讀方式。

對應多種瀏覽格式

CSS 可以定義樣式表,來針對不同的瀏覽器來呈現--這裡指的瀏覽器,不是 Internet Explorer、Opera 與 FireFox 等瀏覽器,因為這類用電腦觀看的瀏覽器本來應該看起來都要是一樣的感覺才對。

如同上面所言,我所指的不同瀏覽器,是列表機,或是手機等硬體設備。這類的機器給予人們的觀感不同,自然閱讀方法跟排版也應該要不一樣。

如何用同一個頁面,針對不一樣的瀏覽器時,呈現不一樣的顯現方式?在下只好拿出自己的劣作給讀著傷眼了:

電腦瀏覽器的樣式預覽列印的樣式手持式螢幕的樣式

減少製作成本的方案

台北捷運公司為了也可以方便站內朋友,除了有一般版的網頁以外,還有手持式 PDA 版的網頁,因此為了維護網頁,就得做兩次一樣的工作。然而,若採用CSS樣式來對應各種不同瀏覽器的話,維護網頁的動作就只需要一次。依此可以推測:對公司來說,長時間下來累積下來的人力成本,相比之下落差是很大的。