css 大家都知道,web標準在中國傳播初期,人們使用“div+css”描述web標準,似乎有點道理,根據國內網頁設計師的編碼水平,看似就是使用div配合css來替代table布局。
可是學過一段時間web標準的人士,都知道這是誤解,那麼有人提出,摒棄div+css的說法,提倡XHTML+CSS的說法,因為要使用兩門語言來架構網頁,但是這種稱呼也不準確,不完整,因為只提到了XHTML1.0標準和CSS2.0(CSS2.1)規範。
其實web標準就是web標準,叫別的都不對,他就是web開發中的一些列標準的集合,XHTML,XML,CSS,DOM,ECMAScript,制定這些標準是為了更好的約束,web運行平台(瀏覽器)的開發廠商,而我們遵循web標準開發,也是為自己著想,通過福士的努力,迫使流氓開發商,遵循統一標準,降低開發人員的難度,讓我們的作品能更好的跨平台,跨越瀏覽器的障礙(IE,FF,Opera等等),跨越裝置的障礙(PC,手持功能,手機,列印裝置等),跨越使用者障礙(色盲,色弱,視力不好,肢體殘疾等)。
為什麼要遵循web標準進行設計和開發?上一段也已經宏觀的提到了,跨平台統一於一個標準,最終降低開發難度。具體實施上肯定沒有一個老闆這麼偉大的投身標準事業,商人總是依照利益的驅動,是哪些利益驅動了他們應用web標準的?
- 更少的代碼和組件,容易維護
- 頻寬要求降低(代碼更簡潔),成本降低。
- 更容易被搜尋引擎搜尋到
- 改版方便,不需要變動頁面內容
- 提供列印版本而不需要複製內容
- 提高網站易用性。
當最終老闆看到在應用web標準後的代碼很簡潔,出現了許多未曾謀面的div,然後你給他展示,可以隨意改版,多種裝置相容,多種瀏覽器安全色,很好,老闆很欣賞,這麼多的好處,我們全力支援web標準,而導致的結果,web標準技術人才火熱,應用web標準開發的項目增多,開發效率成為問題,開發模式還在摸索之中,同時也出現了在web標準應用程式中的一些錯誤方法,div的濫用,class的濫用,結構一塌糊塗,人們重視css比重視xhtml多了許多。
div是什嗎?剛開始人們的認識是無語義,應用無語義的事物來布局,是正確的,既然無語義,div這三個字母就不會出現。Quote
Jeffrey Zeldman的解釋是“用短語division解釋div,是最恰當不過的了”。Div和span一樣是用作裁減分割文檔的,那麼他們也就擁有語義了。Div聯合id和class屬性,提供了一個把結構添加到文檔的通用機制。Div 將文檔分割成一塊一塊的,怎麼區分這一塊塊來進行布局呢?也就是怎麼給專屬的div賦予一個唯一標識ID,通用的div賦予一個class值,也可以在 class的基礎上再賦一個id。如果不用id看似也可以,全部class,只要合理的命名就可以,你可以為header地區,添加class, <div class="IdHeader"> ,類
IdHeader告訴你,這裡是唯一的而且是header地區。可是ID是最能體現文檔結構的一個屬性。當你為ID不能重用而牢騷時,想想ID的強大功能吧!
ID的屬性有著令人難以置信的強大功能。ID屬性可以完成下列功能:
- 作為一個樣式表的選取器,可以讓我們建立緊湊的、最小化了的XHTML分頁檔。
- 最為一個超文本連結的目標anchor,用來替代過時的name屬性(或者向前相容和她共存)
- 作為基於DOM的指令碼中特殊元素的引用方法。
- 作為一個聲明的對象元素名字。
- 作為通常目的流程處理的工具(W3C的例子中:“當從HTML頁面提取資料到一個資料庫,或者把HTML文檔轉化到另外一個格式等,這個可以用來標明地區”)
現在也經常出現組合class的結構,就是擁有一個CSS架構,然後任意組合class實現布局,看似是提高效率的捷徑,可是花費的代價卻是破壞結構,(當然也有例外,如Grids
CSS),一般的做法就像馬鈴薯網前台編碼的設計<div class='box_abstract box_program box_border'>這個維護帶來了很大的困難,也就是結構設計的不夠合理,只是為了div+css而不是為了web標準。
Web標準的要把握幾點:
- Use structural, semantic markup.
- Separate presentation from the (X)HTML document using CSS.
- Rely on JavaScript as an enhancement for, not a replacement of, website features.
- 使用結構化,語義化的標籤
- 使用CSS分離出(X)HTML文檔中的表現元素
- 依靠Javascript去增強,而不是替代,網站的特徵(舉個例子就是如果css做不了的,交給Javascript而不是替代css去做他能做的)
對於多樣式組合的結構我一直是很反感的,可能我理解的不夠深入,體會不到他的好處,或許合理的組合可以兼顧結構和開發效率,可是我沒有發現,我就要抵觸。
對樣式組合方式是這樣的<div class=”class1 class2 … classn”></div>舉個布局例子<div class=”f-left w400 bgfff”>幾個類組合成一個左浮動,寬400 背景為白色的一個地區
你可能擁有一個龐類庫,頁面只需要任意的class的組合就可以完成,省去大部分花費在css上的時間,可是帶來的是結構的混亂,改版的困難,甚至向後相容受到限制。這樣做和table布局沒什麼兩樣,只是代碼看著好看而以,而且代碼量相差也不會太大。在應用web標準初期,合理的table布局也是允許的。
如此多的class讓我想起了table冗長的屬性
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER WIDTH=100% HEIGHT=100%>
難道辛辛苦苦就是想使用div配合css類比出一個table很容易實現的效果?而且達到和table布局一樣的拙劣?
語義化也是結構的一個部分,語義除了合理的使用(X)HTML標記語言,id也是一個語義組成的部分,div的id就像一個即時貼,告訴你某個div的語義,告訴你這個區塊的意義。
微格式(Microformat)是在標準 XHTML 程式碼中嵌入結構化資料的一種新方法。他的誕生也很明確的說明了web的結構永遠是第一位,語義化的優勢很現實的體現出來,div的屬性規劃也體現著語義,而不僅僅是一個傳遞給樣式工作的介面。可以去看看ibm文檔中心的一篇“使用 microformats 分離資料與格式”瞭解它的工作原理。
其實說了這麼多,我也有點沒頭緒了。主要就是我對結構和開發效率之間的矛盾的一個思考,css架構怎樣才能不破環結構的一個疑問。而且對於結構和效率我的觀點就是“
擁有合理的結構,才是你web標準化的根本動機”,web是承載資訊的,沒有理由為了視覺效果,而破壞合理的結構。