在上週的專欄文章中,我討論了Yahoo! Developer Network,集中論述了在Yahoo! User Interface (YUI) Library(用戶界面庫)中可用的JavaScript特性(最重要的就是日曆)。我想再花一點時間涉入YUI庫中另一個提供了CSS工具的領域。這些工具讓你能夠輕鬆地將以CSS為基礎的設計與網路應用程式結合。
瀏覽器支援
CSS工具的一個主要特性就是它的分級提供了對A級瀏覽器的完美支援。分級瀏覽器支援純粹是Yahoo!的分級,在它的網站上你可以看到完整的說明,它主要描述了在當今市場上的瀏覽器中,CSS的良好表現。
在這個線上表格中,瀏覽器被分成三個等級的瀏覽器支援(A、C和X)。 A級是最高的支援等級。透過充分發揮現代Web標準的強大效能,YUI函式庫發現,A級體驗提供了進階的功能性和視覺保真度。支援類別和相關文件使你能夠切割身體會到哪裡支援CSS,但是它應該在每種瀏覽器中都可用(透過可能的降級)。
可重複使用的CSS
YUI庫中包含了三個CSS領域或特性,涉及格式化、字體介紹和以網格為基礎的(列和行)版式。網站上用這些術語來描述這三個元素:
Page Grids:讓你能夠在所用模版容量範圍內,嵌入一到四列的網格。
Fonts:提供跨瀏覽器的排版標準化和控制器。一般來說,它在完全支援使用者(在瀏覽器內)對字體進行調整的同時,也提供了一致的字體和行高。
Reset:提供跨瀏覽器的HTML元素預設賦值的標準化。它也去除了瀏覽器中的共同預設表達,如對要強調元素使用粗體,這樣是為了幫助保證對所有的字體的定義都是有意圖的,並且元素始終用的是它們的語義含義,而不是習慣上的視覺表達。
在被安裝了以後,YUI庫下載中的每個元素都可以在Web伺服器的以下目錄/檔案中取得:
Page Grids: buildgridsgrids.css
Fonts: buildfontsfonts.css
Reset: build eset eset.css
你可以在自己的Web伺服器上安裝這些基礎目錄或將它們置於你的網站內,以便根據需要引用它們。 CSS的一個重要功能(除了免費之外)就是,它在發布之前,已經經過了徹底的檢驗和調試。讓我們來更仔細地看一下實際操作中的CSS工具。
有網格的頁面版式
以網格為基礎的版面幾乎是所有網站設計或頁面版式的動力。過去,這一點常常透過HTML表格來完成,但是CSS為頁面版式提供了巨大的力量和靈活性。頁面網格提供的程式碼可以根據你的要求,利用列和行來建立頁面。
在頁面網格最基本的層面上,它提供了七種Web頁面模版,其中六種定義了詳細的主要內容/工具條版式;第七個模版定義了一個沒有工具條的版式,主要內容佔據了整個頁面寬度。這些模版的名稱如下:
yui-t1:包含一個位於左側寬度為160px的工具條和一個寬度為570px的主要區域。
yui-t2:包含一個位於左側寬度為180px的工具條和一個寬度為550px的主要區域。
yui-t3:包含一個位於左側寬度為300px的工具條和一個寬度為430px的主要區域。
yui-t4:包含一個位於右側寬度為180px的工具條和一個寬度為550px的主要區域。
yui-t5:包含一個位於右側寬度為240px的工具條和一個寬度為490px的主要區域。
yui-t6:包含一個位於右側寬度為300px的工具條和一個寬度為430px的主要區域。
yui-t7:包含一個寬度為750px的主要區域,沒有工具條。
你可以結合(或編輯,如果你夠大膽)這些模版來達到你的目的。列表A用第一種版式來安排一個頁面的格局(注意:CSS工具安裝在Web伺服器的預設目錄中)。
列表A
<html><head>
<title>Yahoo CSS Tools Example 1</title>
<link rel="stylesheet" type="text/css" href="build/grids/grids.css">
</head>
<body>
<div id="doc" class="yui-t2">
<div id="hd">Page Header</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">Main Area</div>
</div><div class="yui-b">Left Column</div>
</div>
<div id="ft">Page Footer</div>
</div></body></html>
HTML頁面上的幾個註解:
版式被賦予整個頁面-主div標籤被指派為yui-t2類別。這說明採用的是第二種模版。
頁面被分為頁首、主體和頁尾區域。頁首被賦予識別符hd,主體為bd,頁尾為ft。
頁面的主體被分為左區域(如果模版支援的話)和主區域。兩者都被指派為yui-b類,但是主區域在它的div標籤中被附上了yui-main的識別符屬性。