為解決CSS設計難題而生-評《CSS揭祕》

趁著Web專案的開工，我一口氣看完了《CSS揭祕》這本書。此書面向中高階CSS使用者，部分內容難度不小，不亞於程式設計本身。難以置信，如此精彩的內容，是一位年輕的女士寫就，致敬！

這本書是為了解決網站開發中CSS的設計難題而產生的。它針對常見卻又比較難以現的需求，給出了較好的解決方案，並且說明了背後的原理。但是此書並不是只對從事Web開發的人有價值，稍後有說明。

回顧一下近年來Web開發的歷史和人們手中裝置的迭代改進，我們可以看到一個較為清楚的脈絡。似乎事物總沿著這樣的路徑發展：

能用 --> 好用 --> 漂亮 --> 個性。

先做到能用，再改進成好用；然後追求漂亮和個性，以及更好的體驗。

想想你用過的手機吧！顯示3行文字的黑白屏 —> 彩屏的飛躍 —> 更大、顯示效果更佳的彩屏 —> 劃時代的iPhone —> 未來。網站也是一樣，你可以找一下10多年前網站頁面的截圖，以現在的網站設計標準和展示效果來看，土的都掉渣了，慘不忍睹。

從功能需求到追逐個性體驗，人類從不吝嗇消費計算能力。為了實現各種特別的顯示效果，達到更好的人機互動體驗，消耗能量在所不惜。從某種意義上說，人類是視覺動物。但是，這種對體驗無止境的需求，導致對介面的要求日益提升，挑戰很嚴峻。不光是火熱的Web開發，其它涉及介面的軟體開發也一樣面臨這個壓力。

很多IT公司裡面有一個必備的職位 - 美工，或者有一個設計團隊。習慣上，一個產品在設計時，都讓美工先設計出效果圖。在經過反覆的討論修改，最終定稿後，美工切圖，按指定的格式，給出分割好的元素，技術人員再想辦法套到軟體或頁面裡面去，調校，生成產品。

麻煩來了。這裡面的矛盾在於：設計習慣追求個性，標新立異，打破常規。設計出的介面顯示、互動效果好，意味著更多的破壞系統既有元素的預設效果和規則，甚至創造完全沒有的東西。但是這種創意，實現往往較為困難。比如使用一批特別設計的按鈕，像這種：

按鈕很有質感，做的很好看，而且是真正的按鈕，點選有反應的。下面這個，是瀏覽器預設的按鈕效果： 瀏覽器預設渲染出的按鈕效果實在稀鬆平常，正是因為沒人喜歡，不夠個性，才要重新設計。但是復現美工的設計並不容易。技術上比較偷懶的辦法，就是貼圖，用切好的圖片元素模擬一下。可弊端是細節模擬難度大，比如按下按鈕的細微變化。Web上使用，甚至要藉助JavaScript程式碼完成，不但要管理圖片，還要管理關聯的程式碼。

如果是客戶端程式使用這些設計，則意味著要寫很多程式碼，即便你使用第三方類庫，也不能完全擺脫。假如不想用簡陋的圖片模擬設計效果，就必須自己用程式碼去一個線條一個背景的逐個繪製，這會耗費程式設計師很多的時間和精力，逼真的復現設計，絕非易事。更讓人洩氣的是，這個開發過程本質上和業務邏輯卻沒有什麼關係，它就是一套介面效果。而且它還不好修改，這次實現出來，下次設計變了，程式碼還得重寫。

迅速發展的CSS，很可能成為拯救者。Web開發的火熱，推動著相關領域的飛速進步。原本混作一團的HTML技術，分化為3大支柱：HTML-結構、CSS-表現、JavaScript-行為。隨著瀏覽器對相關標準的逐步實現，CSS逐漸發展出了令人難以置信的介面展示能力，而且潛力還遠未釋放出來。

為什麼這麼講？我覺得可以把瀏覽器看成繪圖機，CSS指令很精巧，它告訴繪圖機如何正確的繪製各種預定義的效果，如同程式語言的“巨集定義”一般。使用者可以把獲得瀏覽器支援的各類“巨集定義”組合起來，通過引數反覆調校，達到自己的期望。這是更高程度的抽象，效率當然比手工開發繪圖機要高的多。比如一條正確的CSS gradient指令就可以生成一個漸變效果，手工寫要費多少工夫？

介面的實現大體可以分成兩大類：效果顯示和位置控制。在我看來，CSS精於效果顯示，而位置控制較弱，需要通過指令更多調整。這其實跟HTML佈局特性、瀏覽器渲染流程有關。CSS技術的演進和能力的提升，大量的消除了對圖片裁切、管理的需要。常見的各種介面元素，CSS都能控制，一些常見的圖示，甚至都有可以用於CSS的字型實現，根本無需作圖。那些所謂的圓角，就是一條指令。我甚至認為，介面中除了具備宣示意義的圖片，其它只有裝飾作用的圖，都可以通過CSS指令生成，完全無須切圖，更不必單獨管理。這些改進，減輕了網站的訪問壓力，提高了訪問速度，節約了流量成本，是值得一做的。

不過，要熟練的應用CSS指令也並非易事。主要原因是：Web領域變化很快，CSS指令很多，背後的原理理解起來也不是輕而易舉。瀏覽器對一些新的指令支援度參差不齊，越是新的指令，支援度越低。所以，我們需要老師指導，告訴我們如何正確的去做。

《CSS揭祕》就是一位老師，它面向解決效果顯示和位置控制問題。這本書不是針對一個Web專案編纂的完整的教程，也不是API說明。它對當下常見的介面需求，給出了自己的解決辦法。比如控制背景、邊框，生成形狀，產生視覺效果，控制字型，調整結構佈局，使用動畫。根據不同的問題分類，它像本手冊一般做出了問題的解答。作者展現了對CSS指令的深刻理解，功力深厚。一些效果的實現思路，沒有紮實的功底是很難想得到的。

它遵循“問題提出、解決方案、思路和原理”這個過程進行闡述。你不僅可以知道那炫目的頁面效果是通過什麼CSS指令做出來的，還能瞭解背後的設計思路和CSS指令原理。很多人解決問題的辦法是：搜尋出一個看上去還行的例子，複製程式碼過來，稍加修改，能用就好。可如果對背後的原理和思路不做推敲和研究，就會導致無法應對變化。而理解了原理，你就能舉一反三，不受現有效果的拘泥。即便你記不住具體細節，還可以查閱它嘛。所以花點時間去理解設計原理，是值得的。

這本書，其實並不僅僅對Web開發，前端開發有參考價值，對其他涉足介面開發的人員都有潛在的幫助。這是因為Web開發的模式、理念及其技術，已經廣泛滲透到其它領域。比如手機應用程式，傳統Windows客戶端應用，都已經有了不錯的使用Web技術開發產品的解決方案。應用程式內嵌瀏覽器核心，渲染應用內部的HTML、CSS，執行JavaScript指令。CSS在這裡，顯示出巨大的威力。各種絢麗的效果，幾條指令就能完成，修改也很容易。既不用作圖，更不用切圖、管理。讓你自己寫程式碼繪製，要搞到什麼時候？它大大節省了介面開發的成本。

CSS變得越來越複雜，各類指令字、引數一大堆。它越來越像一門特定領域的程式語言，直譯器是瀏覽器。它也在侵蝕JavaScript的地盤。一些介面效果，原本要依靠js程式碼完成，可是如果大家發現是通用需求，可能瀏覽器就增加個指令，一步到位。

不過，本書的作者也提到，針對一些特定的需求，使用SVG結合CSS，效果會更好。常用的解決問題的思路是：層疊、重複。層疊可以前後元素指令不同，進而產生覆蓋、抵消，重複則可以創造整體效果。 如果要用好CSS，還得參考下CSS標準規範，瞭解已有的指令功能，並根據目標瀏覽器平臺，確定支援程度。下面幾個網站可以參考：

https://www.w3.org/TR/#tr_CSS

http://caniuse.com/#home

http://html5test.com/

我想過這個問題：究竟是什麼讓CSS這麼強大？是深思熟慮定義的統一概念，全面多樣的屬性設定，靈活強大的指令字、引數，以及它們的相互組合造就了這一切。

本文後面給出當下瀏覽器對W3C標準的支援程度，以得分為序。

谷歌瀏覽器是最積極的Web標準支持者

Firefox緊隨其後

Microsoft Edge也還行

Safari差強人意，不太滿意

最後一名IE，只能呵呵，難怪招人恨

作者部落格