960網(wǎng)格系統(tǒng)

Bryan Veloso 在最近在他重新發(fā)布的網(wǎng)站Avalonstar 上應(yīng)用了960網(wǎng)格系統(tǒng)（960 Grid System）中的16列的PS模板開發(fā)。

在這同時(shí)感謝他給960.gs提供了網(wǎng)站的截圖以供使用。網(wǎng)站：http://960.gs/

正如你們所知，我最近正為一個(gè)CSS框架（此框架是應(yīng)本人最近的個(gè)人的專項(xiàng)需求所開發(fā)的）建一個(gè)站點(diǎn)。由于一直沒想到更好的名字，再說960這個(gè)數(shù)字湊成的logo還不錯(cuò)，所以簡單的叫做960 網(wǎng)格系統(tǒng)（960 Grid System）。

這很有趣，因?yàn)槲抑皇窃谛瞧谔炀W(wǎng)上臨睡前上tweet發(fā)了一條關(guān)于960網(wǎng)格系統(tǒng)的信息，然后就收到很多評(píng)論，甚至收到了很多咨詢相關(guān)信息的郵件。

應(yīng)該特別指出的是，這個(gè)180KB大小的下載包，不僅僅是CSS框架，它包含了一下文件：可打印的縮略圖表，針對(duì)Firewofks,Phototshop，OmniGraffle 和Vision的模板文件，CSS文件，HTML文件。

960.css文件經(jīng)壓縮后大小只有4KB。

首先，我寫本CSS框架自是為了我自己的項(xiàng)目，同時(shí)只是為了過把設(shè)計(jì)的癮。我十分清楚并不是所有人都會(huì)喜歡它。有這么句老話——你要么滿足全部人某一時(shí)段的需求，要么滿足一部分人的永遠(yuǎn)的需求。我并不打算那樣做。我只是想將我過去一年多所關(guān)注的網(wǎng)格方面的東西跟大家分享。假如有人能因此而有所收獲，那是件好事。

好了，廢話少說，繼續(xù)往下看吧。

瀏覽器支持

本框架代碼適用于所有由yahoo評(píng)為A級(jí)（A-grade）的瀏覽器。本文發(fā)文時(shí)間，yahoo對(duì)瀏覽器的評(píng)定情況如下圖所示。

留意上表可以發(fā)現(xiàn)：IE5.x并不在表中，其實(shí)原因很簡單，對(duì)于Yahoo來說，IE5.x的市場占有率已經(jīng)很小，不僅如此，連微軟都停止了對(duì)該版本提供支持。假如你還被人用刀頂著喉嚨，讓你寫代碼去適應(yīng)這個(gè)古老的瀏覽器的話，我建議你到Authentic Jobs （譯者注：某招聘網(wǎng)）看看別的更好的職位吧。

開發(fā)背景

我開始對(duì)網(wǎng)格設(shè)計(jì)產(chǎn)生興趣是在看了 Khoi Vinh 和 Mark Boulton的文章之后。我承認(rèn)，一開始我并不十分理解他們文中的概念，但是后來，經(jīng)過不斷的思考，終于了解到這是一個(gè)在web網(wǎng)頁頁面設(shè)計(jì)領(lǐng)域內(nèi)經(jīng)得起時(shí)間考驗(yàn)的實(shí)踐總結(jié)。不管你喜歡還是不喜歡，現(xiàn)今的網(wǎng)頁大多都是以一個(gè)個(gè)四四方方的“塊”組成。不可避免的，頁面設(shè)計(jì)上也用各式長方形通過不同的組合來達(dá)到目的。

竟然我們要使用這些四四方方的東西，那么我們應(yīng)該對(duì)它們有個(gè)邏輯性的認(rèn)識(shí)。有次在完成Khoi和Mark安排的初步工作后,偶然發(fā)現(xiàn)了Cameron Moll的文章，文中說到，960px是網(wǎng)頁設(shè)計(jì)的最佳寬度。現(xiàn)在基本上顯示器都支持1024×768的分辨率（就像支持以前的800*600那樣），而在這個(gè)分辨率下，960px的寬度的確能夠非常好地展現(xiàn)網(wǎng)頁的內(nèi)容。

自從看了那幾篇文章以后，我在設(shè)計(jì)中開始應(yīng)用這個(gè)布局方法——將960px分成若干列。直至2007年春，可以這樣說，我發(fā)現(xiàn)了我的一套規(guī)律。這個(gè)發(fā)現(xiàn)導(dǎo)致我開始了我個(gè)人網(wǎng)站的重構(gòu)，工作還在進(jìn)行中，不過進(jìn)度很快。假如你看我瞄我一下，發(fā)現(xiàn)了我正在吃我的“狗糧”，在此同時(shí)，我的網(wǎng)站已經(jīng)用上了新版本的16列網(wǎng)格布局。

我現(xiàn)在還不能好好坐下并完成重構(gòu)工作，因?yàn)槲疫€得完成碩士學(xué)位相關(guān)的信件，還有需要完成接到一些私活等等。按時(shí)間順序來說，技術(shù)上我已經(jīng)在Blueprint發(fā)布之前開始使用我網(wǎng)格系統(tǒng)了。這個(gè)說法其實(shí)沒什么很大價(jià)值，只是幫我解釋了“為什么使用另外一個(gè)網(wǎng)格框架？”，因?yàn)槲乙呀?jīng)在一個(gè)項(xiàng)目里用Blueprint。為了減少這個(gè)項(xiàng)目日后的維護(hù)成本，我們要使用一個(gè)已有的代碼庫。盡管我們?cè)诰帉懘a前已經(jīng)商定按Blueprint的約定出發(fā)，但相關(guān)的設(shè)計(jì)人員并沒有從Blueprint的層面出發(fā)來設(shè)計(jì)布局。當(dāng)然，這也有一部分責(zé)任在我，在開發(fā)前我并沒有與他們充分的交流Blueprint工作方式。在項(xiàng)目的最后階段，我基本上將所有的按Blueprint框架寫的代碼換回了用table布局。

這時(shí)候我在想，如果有那么一個(gè)精簡的東西能讓網(wǎng)頁設(shè)計(jì)者和編碼者思維更活躍，溝通更順暢，豈不樂哉？而且，要是執(zhí)行機(jī)構(gòu)包含在該工作流中呢？960網(wǎng)格系統(tǒng)應(yīng)運(yùn)而生！

它并不是

到目前為止，我收到的郵件大部分的問題都是“你個(gè)這個(gè)跟Blueprint哪有什么不同”，這些絕大部分都是很憤恨的說，就像在說“簡直浪費(fèi)你的時(shí)間，因?yàn)锽lueprint已經(jīng)存在，我更喜歡Blueprint，你回去吃奶吧。”一樣。

對(duì)于這部分人，我想給點(diǎn)歡呼聲，你們大可以繼續(xù)使用那些你們認(rèn)為最適合的，最熟悉的框架。我可不愿意挑起矛盾，強(qiáng)迫大家使用這個(gè)框架，而不去使用那個(gè)框架，盡管這個(gè)框架是更值得用的。

它有著明顯的缺陷，或者有不少優(yōu)秀的功能，這全在于你怎么看待它。這就決定了（或不決定）960網(wǎng)格系統(tǒng)的架構(gòu)方式。系統(tǒng)中包含樣式表text.css，它的存在主要是為了保證絕大部分的頁面設(shè)計(jì)中，開發(fā)者可以快速定義原型，常用模塊如頭部文件，段落和列表的基本樣式。

我沒有脫離我原有方向而去做像在ALA（ALA全稱是A LIST APART,著名的前端開站點(diǎn)）官網(wǎng)中用來描述入門文章所用的那種豎排文字的效果。這并不意味著我感覺這種豎排的效果無效，而實(shí)際上，我清楚看到這個(gè)效果的價(jià)值所在。我認(rèn)為這是一個(gè)棒極了的點(diǎn)子，是我崇高的追求。然而它是極其脆弱的，假如通過內(nèi)容編輯器上傳了任意大小、173px高的圖片，那在它之后的網(wǎng)頁元素就都會(huì)被打亂。

我同意它是眾多解決方法中的一個(gè)，而其他則更需要去規(guī)范化。事實(shí)上，當(dāng)一個(gè)網(wǎng)站頁面設(shè)計(jì)完成的時(shí)候，絕大部分的內(nèi)容都會(huì)獨(dú)一無二的固定下來。我特意沒有去設(shè)置文字和頁面背景顏色。你也可以說我懶，但是這正是在使用Blueprint時(shí)所領(lǐng)悟到的，我必須堅(jiān)持下來。我可不希望到時(shí)有人會(huì)說：“為什么這個(gè)<th>有背景色？”。

我也沒有加入例如圖片，引用內(nèi)容等樣式，這是因?yàn)槲液苌儆玫健Ｔ僬呶铱紤]到這樣會(huì)比那種布局和原型相關(guān)聯(lián)的框架更具可設(shè)計(jì)性和更具內(nèi)容導(dǎo)向性。現(xiàn)在能使你輕易的寫一個(gè)一次性的屬于你的樣式表了。

因此，假如我的網(wǎng)格系統(tǒng)并不如你想象的那樣，我希望你們?cè)徫摇１M管我很喜歡披頭士，而且我不會(huì)手下留情。

正文

簡單的說了下960網(wǎng)格系統(tǒng)不去做的內(nèi)容之后，我們來強(qiáng)調(diào)一下該系統(tǒng)的基本特性。首先，對(duì)于熱愛linux的用戶。在linux系統(tǒng)里默認(rèn)的字體順序是這樣的：Helvetica, Arial, Liberation Sans和FreeSans，還有通用的sans-serif。

在Ubuntu系統(tǒng)里，我發(fā)現(xiàn)它使用的默認(rèn)字體san-serif 的寬度更接近Verdana （相比于Helvetica 和Arial）。這并不是很大問題，但是如果你需要讓你的頁面在各種瀏覽器上表現(xiàn)一致的話，你要做的不僅僅是為linux用戶選擇一個(gè)通用的字體。假如你按某一大約寬度的字體來確定塊的大小的話，這顯得相當(dāng)重要，仔細(xì)觀察下，頁面很可能在換行的時(shí)候出現(xiàn)問題。

當(dāng)我將此問題跟我朋友Yannick說了后，他建議我使用在Fedora和Red Hat 兩款Linux操作系統(tǒng)都默認(rèn)使用的Liberation Sans字體。同時(shí)它也可以在通用公共許可證的保護(hù)下簡單自由地獲得，如此的與眾不同。假如非讓我去描述它，我可以說改字體里數(shù)字像用了Verdana，而其他則像用了Helvetica。

在讀過 Jon Christopher’s 的文章后，知道FreeSans最接近Ubuntu下的默認(rèn)字體 Helvetica。因此，在text.css的font-family下的設(shè)置是頁面字體同時(shí)適應(yīng)MSX（MAC OS Ten）,Windows和基于Linux的系統(tǒng)。

調(diào)整與間隔

在我們書生氣十足的要為字體的像素?cái)?shù)驚醒大辯論的之前，且聽我說，我暫且將此按下不表。我十分清楚你們的論點(diǎn)，甚至在做更富有彈性的頁面是參考了你們的觀點(diǎn)。對(duì)于我來說，這就是重復(fù)投資。你可以花上無數(shù)小時(shí)在考慮字體的大小，繼承問題，就像我當(dāng)時(shí)做Geniant Blog那時(shí)一樣，或者你可以在以后都一個(gè)個(gè)像素的調(diào)整。

我發(fā)現(xiàn)Blueprint上文本字體使用了12px，但是YUI（Yahoo user interface）的fonts.css將文本文字定義為13px。除了對(duì)他們按百分比的調(diào)整方法有異議之外，我確實(shí)非常喜歡他們實(shí)現(xiàn)排版的方式。我們已經(jīng)將這些運(yùn)用在Geniant Blog上，以實(shí)現(xiàn)更好的效果（雖然這個(gè)工作耗費(fèi)了很多時(shí)間精力）。

當(dāng)我不得不小心點(diǎn)設(shè)置一個(gè)垂直的基線時(shí)，可以選用body中文本字體大小是13px，算上1.5倍行高（line-height）則是19.5px。絕大多數(shù)塊級(jí)別的元素的底部邊距為20px。這樣一來，你非常容易就得到了一個(gè)一致的基準(zhǔn)線。這只需要調(diào)整標(biāo)題的行高而已。

有兩個(gè)塊級(jí)別的元素我沒有將設(shè)置它的底部邊距，它們分別是blockquote 和form。在strict文檔類型定義里面，要求所有其他的塊級(jí)元素都在它們里面。比如：paragraph標(biāo)簽在blockquote里面，或者fieldsets標(biāo)簽在form里面。盡管它不可以設(shè)置什么邊距，但是那些塊級(jí)的子元素可以整齊的排列在里面。

我已經(jīng)將list元素設(shè)置為左縮進(jìn)30px，假如你要頂端對(duì)齊，則將縮進(jìn)像素?cái)?shù)歸零。我實(shí)際上認(rèn)為對(duì)齊了標(biāo)點(diǎn)符號(hào)是相當(dāng)酷的，但還沒有碰到有這種需求的顧客，于是我在在CSS文件中對(duì)應(yīng)的地方改掉了，以免產(chǎn)生不必要的爭論。

:Focus

我只是簡單的再說下這觀點(diǎn)，這觀點(diǎn)相當(dāng)普遍。盡管我個(gè)人認(rèn)為Eric Meyer將reset.css中的":focus"移除的確是使頁面更美觀，但我想保留焦點(diǎn)的邊框才是正道，因?yàn)橛胁糠钟脩羰鞘褂面I盤來點(diǎn)擊鏈接的，而非鼠標(biāo)。

為了讓代碼兼容Opera瀏覽器，代碼編寫上花了較長的時(shí)間。這是因?yàn)镺pera瀏覽器中根本就沒有類似:focus這樣的不標(biāo)簽。不管怎么說，假如你希望你的鏈接看起來更簡潔一點(diǎn)，你可以將text.css中的a:focus去掉，同時(shí)你要知道你的操作將會(huì)使你設(shè)計(jì)犧牲了網(wǎng)頁的到達(dá)無障礙性。

列

960網(wǎng)格系統(tǒng)中與Blueprint有著不少大不相同的地方，除了命名規(guī)則不一樣外，還有各列獲得各列之間的間隔的方式也大不相同。在Blueprint中，每個(gè)列直接的間隔都是10px（對(duì)我來說，覺得太少了），而且都是在列的右邊。每行的最后一列要用class="last"來去掉它本身的右邊的間隔。這意味著不管在容器的左邊還是右邊，都必須會(huì)有空隙。在大多數(shù)的情況下，這不會(huì)有什么大問題，但是如果如果用戶的使用了特殊的瀏覽器，實(shí)際上使用Chrome瀏覽器時(shí)就會(huì)顯示出不正常。

在960網(wǎng)格系統(tǒng)里，每一列都是左右各有邊距10px，這是考慮到有些容器會(huì)留有10px作為邊上的緩沖，而且列與列中間的寬度會(huì)達(dá)到20px，還有一個(gè)就是：沒有必要在每行最后一列額外的指定class來清除多余間隔。

在少數(shù)情況下，你可能需要將一個(gè)網(wǎng)格嵌套在另一個(gè)網(wǎng)格里面。在這種情況下，你需要用class="alpha",用在嵌套在里面每一行的第一個(gè)網(wǎng)格，用class="omega"在嵌套在里面的網(wǎng)格的每一行的最后一個(gè)網(wǎng)格。這稍微增加了你工作量，但是這就是比較邊緣的情況，并不會(huì)出現(xiàn)得太多。

我特地選用了這樣一種方式約定命名規(guī)則，使用grid_xx,出于以下幾種考慮，假如用span-xx這類會(huì)容易把人弄糊涂，因?yàn)?lt;span>,<td colspan="x">和<colgroup span="x">在HTML標(biāo)簽早已存在了。我想只有在這幾個(gè)標(biāo)簽或?qū)傩詻]有被使用的情況下我才選擇這個(gè)命名規(guī)則。同時(shí)我也不喜歡一而再的用這種——class="column..."，雖然這個(gè)方法是不錯(cuò)的，但是Bluprint那伙人在最近的項(xiàng)目中把這個(gè)東西用濫了。

你通過給網(wǎng)格樣式用prefix_XX 或者suffix_XX組合控制，就可以很容易的在每個(gè)單元網(wǎng)格的前面或后面添加空白的列（欄），這很像Blueprint。命名規(guī)則其實(shí)是按個(gè)人喜歡，就像我確實(shí)很容易就被諸如“Append”這些詞搞昏頭，所以還是少惹它為妙。

IE瀏覽器

今天又不少人問我有關(guān)960網(wǎng)格系統(tǒng)的IE兼容的問題，還有壓縮包里面為什么ie.css這個(gè)文件？簡單的說，本系統(tǒng)根本不用進(jìn)行修補(bǔ)來適應(yīng)IE瀏覽器。IE6有個(gè)頑固的問題，就是在任何浮動(dòng)的元素的margin顯示上都會(huì)是控制上的兩倍。或者這是個(gè)大問題，但是在那些浮動(dòng)的元素樣式控制上添加display:inline后能很好地解決這問題。這方法對(duì)其他瀏覽器也沒有任何副作用，所以在在主樣式表——960.css里很容易找到這段代碼。

你也許也會(huì)發(fā)現(xiàn)<hr />在IE6和IE7下，在畫出的橫線的四方都會(huì)有些空隙，其中上下各有大概7個(gè)像素的空隙。通過調(diào)節(jié)<hr />的margin屬性很容易解決這個(gè)問題。對(duì)于我來說，這個(gè)問題還可以接受，并不值得通過再加css控制來修復(fù)它。假如你非要給解決這個(gè)問題的話，你單獨(dú)寫個(gè)css來兼容IE瀏覽器吧，記住，要單獨(dú)寫個(gè)css文件和做好標(biāo)注。

清除元素

最后一點(diǎn)，我想說說960.css中的清除元素的方式。這是我個(gè)人最喜歡的部分，通過添加極少數(shù)標(biāo)簽就可以清除任何元素。由于我之前已經(jīng)大篇幅說過了這問題，這里就不再展開細(xì)說了。基本上，通過添加“class="clear"”在對(duì)應(yīng)的你希望消除的<span>或者<div>這類的標(biāo)簽里，就可以讓對(duì)應(yīng)內(nèi)容“消失”。唯一的影響就是它同時(shí)會(huì)消除浮動(dòng)。

對(duì)于一些不想將自己HTML代碼弄得“如此混亂”的人，其實(shí)還有其他清除的方法——你可以通過CSS來增加標(biāo)簽，而這種方法已經(jīng)有非常豐富的文檔可參考。實(shí)際上，通過添加class="clearfix"到元素里，是清除元素后方的內(nèi)容。

使用許可

整個(gè)源代碼壓縮包是完全免費(fèi)的，許可發(fā)布遵循GPL和MIT。其實(shí)我也不是非常清楚這兩個(gè)東西，按我理解遵循這兩個(gè)許可證發(fā)布協(xié)議以為著你可以將我的代碼用在任何情況下（商用或者自用）。在這我尤其要感謝我的朋友Michael Montgomery ，感謝他那些不是很專業(yè)的建議，感謝他幫我在各種法律術(shù)語之間理清了思路。他白天是個(gè)有資質(zhì)的律師，晚上則是網(wǎng)絡(luò)武士，幫我修飾960網(wǎng)格系統(tǒng)的文字資料。

尾聲

好了，伙計(jì)們，就這樣了。真心希望960網(wǎng)格會(huì)對(duì)你們的畫草圖，搭建框架，網(wǎng)頁設(shè)計(jì)/編碼等工作有所幫助。

近期計(jì)劃做一個(gè)教程，關(guān)于“如何通過jQuery添加樣式hooks來控制網(wǎng)頁元素”，因?yàn)榻谧鲞^這類型的東西，有經(jīng)驗(yàn)想跟大家分享。我不認(rèn)為JS應(yīng)該出現(xiàn)在CSS框架里面。所以這是個(gè)獨(dú)立的教程系列。