趁著Web項(xiàng)目的開工哲思，我一口氣看完了《CSS揭秘》這本書页畦。此書面向中高級CSS用戶坯临，部分內(nèi)容難度不小，不亞于編程本身故痊。難以置信顶瞳，如此精彩的內(nèi)容，是一位年輕的女士寫就崖蜜，致敬！
這本書是為了解決網(wǎng)站開發(fā)中CSS的設(shè)計(jì)難題而產(chǎn)生的客峭。它針對常見卻又比較難以現(xiàn)的需求豫领，給出了較好的解決方案，并且說明了背后的原理舔琅。但是此書并不是只對從事Web開發(fā)的人有價(jià)值等恐，稍后有說明。
回顧一下近年來Web開發(fā)的歷史和人們手中設(shè)備的迭代改進(jìn)备蚓，我們可以看到一個(gè)較為清楚的脈絡(luò)课蔬。似乎事物總沿著這樣的路徑發(fā)展：
能用 –> 好用 –> 漂亮 –> 個(gè)性。
先做到能用郊尝，再改進(jìn)成好用二跋；然后追求漂亮和個(gè)性，以及更好的體驗(yàn)流昏。
想想你用過的手機(jī)吧扎即！顯示3行文字的黑白屏 —> 彩屏的飛躍 —> 更大、顯示效果更佳的彩屏 —> 劃時(shí)代的iPhone —> 未來况凉。網(wǎng)站也是一樣谚鄙，你可以找一下10多年前網(wǎng)站頁面的截圖，以現(xiàn)在的網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)和展示效果來看刁绒，土的都掉渣了闷营，慘不忍睹。
從功能需求到追逐個(gè)性體驗(yàn)知市，人類從不吝嗇消費(fèi)計(jì)算能力傻盟。為了實(shí)現(xiàn)各種特別的顯示效果速蕊，達(dá)到更好的人機(jī)交互體驗(yàn)，消耗能量在所不惜莫杈。從某種意義上說互例，人類是視覺動(dòng)物。但是筝闹，這種對體驗(yàn)無止境的需求媳叨，導(dǎo)致對界面的要求日益提升，挑戰(zhàn)很嚴(yán)峻关顷。不光是火熱的Web開發(fā)糊秆，其它涉及界面的軟件開發(fā)也一樣面臨這個(gè)壓力。
很多IT公司里面有一個(gè)必備的職位 – 美工议双，或者有一個(gè)設(shè)計(jì)團(tuán)隊(duì)痘番。習(xí)慣上，一個(gè)產(chǎn)品在設(shè)計(jì)時(shí)平痰，都讓美工先設(shè)計(jì)出效果圖汞舱。在經(jīng)過反復(fù)的討論修改，最終定稿后宗雇，美工切圖昂芜，按指定的格式，給出分割好的元素赔蒲，技術(shù)人員再想辦法套到軟件或頁面里面去泌神，調(diào)校，生成產(chǎn)品舞虱。
麻煩來了欢际。這里面的矛盾在于：設(shè)計(jì)習(xí)慣追求個(gè)性，標(biāo)新立異矾兜，打破常規(guī)损趋。設(shè)計(jì)出的界面顯示、交互效果好椅寺，意味著更多的破壞系統(tǒng)既有元素的默認(rèn)效果和規(guī)則舶沿，甚至創(chuàng)造完全沒有的東西。但是這種創(chuàng)意配并，實(shí)現(xiàn)往往較為困難括荡。比如使用一批特別設(shè)計(jì)的按鈕，像這種：
按鈕很有質(zhì)感溉旋，做的很好看畸冲，而且是真正的按鈕，點(diǎn)擊有反應(yīng)的。下面這個(gè)邑闲，是瀏覽器默認(rèn)的按鈕效果：
瀏覽器默認(rèn)渲染出的按鈕效果實(shí)在稀松平常算行，正是因?yàn)闆]人喜歡，不夠個(gè)性苫耸，才要重新設(shè)計(jì)州邢。但是復(fù)現(xiàn)美工的設(shè)計(jì)并不容易。技術(shù)上比較偷懶的辦法褪子，就是貼圖量淌，用切好的圖片元素模擬一下∠油剩可弊端是細(xì)節(jié)模擬難度大呀枢，比如按下按鈕的細(xì)微變化。Web上使用笼痛，甚至要借助JavaScript代碼完成裙秋，不但要管理圖片，還要管理關(guān)聯(lián)的代碼缨伊。
如果是客戶端程序使用這些設(shè)計(jì)摘刑，則意味著要寫很多代碼，即便你使用第三方類庫刻坊，也不能完全擺脫枷恕。假如不想用簡陋的圖片模擬設(shè)計(jì)效果，就必須自己用代碼去一個(gè)線條一個(gè)背景的逐個(gè)繪制紧唱，這會(huì)耗費(fèi)程序員很多的時(shí)間和精力活尊，逼真的復(fù)現(xiàn)設(shè)計(jì)隶校，絕非易事漏益。更讓人泄氣的是，這個(gè)開發(fā)過程本質(zhì)上和業(yè)務(wù)邏輯卻沒有什么關(guān)系深胳，它就是一套界面效果绰疤。而且它還不好修改，這次實(shí)現(xiàn)出來舞终，下次設(shè)計(jì)變了轻庆，代碼還得重寫。
迅速發(fā)展的CSS敛劝，很可能成為拯救者余爆。Web開發(fā)的火熱，推動(dòng)著相關(guān)領(lǐng)域的飛速進(jìn)步夸盟。原本混作一團(tuán)的HTML技術(shù)蛾方，分化為3大支柱：HTML-結(jié)構(gòu)、CSS-表現(xiàn)、JavaScript-行為桩砰。隨著瀏覽器對相關(guān)標(biāo)準(zhǔn)的逐步實(shí)現(xiàn)拓春，CSS逐漸發(fā)展出了令人難以置信的界面展示能力，而且潛力還遠(yuǎn)未釋放出來亚隅。
為什么這么講硼莽？我覺得可以把瀏覽器看成繪圖機(jī)，CSS指令很精巧煮纵，它告訴繪圖機(jī)如何正確的繪制各種預(yù)定義的效果懂鸵，如同編程語言的“宏定義”一般。用戶可以把獲得瀏覽器支持的各類“宏定義”組合起來醉途，通過參數(shù)反復(fù)調(diào)校矾瑰，達(dá)到自己的期望。這是更高程度的抽象隘擎，效率當(dāng)然比手工開發(fā)繪圖機(jī)要高的多殴穴。比如一條正確的CSS gradient指令就可以生成一個(gè)漸變效果，手工寫要費(fèi)多少工夫货葬？
界面的實(shí)現(xiàn)大體可以分成兩大類：效果顯示和位置控制采幌。在我看來，CSS精于效果顯示震桶，而位置控制較弱休傍，需要通過指令更多調(diào)整。這其實(shí)跟HTML布局特性蹲姐、瀏覽器渲染流程有關(guān)磨取。CSS技術(shù)的演進(jìn)和能力的提升，大量的消除了對圖片裁切柴墩、管理的需要忙厌。常見的各種界面元素，CSS都能控制江咳，一些常見的圖標(biāo)逢净，甚至都有可以用于CSS的字體實(shí)現(xiàn)，根本無需作圖歼指。那些所謂的圓角爹土，就是一條指令。我甚至認(rèn)為踩身，界面中除了具備宣示意義的圖片胀茵，其它只有裝飾作用的圖，都可以通過CSS指令生成挟阻，完全無須切圖琼娘，更不必單獨(dú)管理呵哨。這些改進(jìn)，減輕了網(wǎng)站的訪問壓力轨奄，提高了訪問速度孟害，節(jié)約了流量成本，是值得一做的挪拟。
不過挨务，要熟練的應(yīng)用CSS指令也并非易事。主要原因是：Web領(lǐng)域變化很快玉组，CSS指令很多谎柄，背后的原理理解起來也不是輕而易舉。瀏覽器對一些新的指令支持度參差不齊惯雳，越是新的指令朝巫，支持度越低。所以石景，我們需要老師指導(dǎo)劈猿，告訴我們?nèi)绾握_的去做。
《CSS揭秘》就是一位老師潮孽，它面向解決效果顯示和位置控制問題揪荣。這本書不是針對一個(gè)Web項(xiàng)目編纂的完整的教程，也不是API說明往史。它對當(dāng)下常見的界面需求仗颈，給出了自己的解決辦法。比如控制背景椎例、邊框挨决，生成形狀，產(chǎn)生視覺效果订歪，控制字體脖祈，調(diào)整結(jié)構(gòu)布局，使用動(dòng)畫陌粹。根據(jù)不同的問題分類撒犀，它像本手冊一般做出了問題的解答福压。作者展現(xiàn)了對CSS指令的深刻理解掏秩，功力深厚。一些效果的實(shí)現(xiàn)思路荆姆，沒有扎實(shí)的功底是很難想得到的蒙幻。
它遵循“問題提出、解決方案胆筒、思路和原理”這個(gè)過程進(jìn)行闡述邮破。你不僅可以知道那炫目的頁面效果是通過什么CSS指令做出來的诈豌，還能了解背后的設(shè)計(jì)思路和CSS指令原理。很多人解決問題的辦法是：搜索出一個(gè)看上去還行的例子抒和，復(fù)制代碼過來矫渔，稍加修改，能用就好摧莽∶硗荩可如果對背后的原理和思路不做推敲和研究，就會(huì)導(dǎo)致無法應(yīng)對變化镊辕。而理解了原理油够，你就能舉一反三，不受現(xiàn)有效果的拘泥征懈。即便你記不住具體細(xì)節(jié)石咬，還可以查閱它嘛。所以花點(diǎn)時(shí)間去理解設(shè)計(jì)原理卖哎，是值得的鬼悠。
這本書，其實(shí)并不僅僅對Web開發(fā)亏娜，前端開發(fā)有參考價(jià)值厦章，對其他涉足界面開發(fā)的人員都有潛在的幫助。這是因?yàn)閃eb開發(fā)的模式照藻、理念及其技術(shù)袜啃，已經(jīng)廣泛滲透到其它領(lǐng)域。比如手機(jī)應(yīng)用程序幸缕，傳統(tǒng)Windows客戶端應(yīng)用群发，都已經(jīng)有了不錯(cuò)的使用Web技術(shù)開發(fā)產(chǎn)品的解決方案。應(yīng)用程序內(nèi)嵌瀏覽器內(nèi)核发乔，渲染應(yīng)用內(nèi)部的HTML熟妓、CSS，執(zhí)行JavaScript指令栏尚。CSS在這里起愈，顯示出巨大的威力。各種絢麗的效果译仗，幾條指令就能完成抬虽，修改也很容易。既不用作圖纵菌，更不用切圖阐污、管理。讓你自己寫代碼繪制咱圆，要搞到什么時(shí)候笛辟？它大大節(jié)省了界面開發(fā)的成本功氨。
CSS變得越來越復(fù)雜，各類指令字手幢、參數(shù)一大堆捷凄。它越來越像一門特定領(lǐng)域的編程語言，解釋器是瀏覽器围来。它也在侵蝕JavaScript的地盤纵势。一些界面效果，原本要依靠js代碼完成管钳，可是如果大家發(fā)現(xiàn)是通用需求钦铁，可能瀏覽器就增加個(gè)指令，一步到位才漆。
不過牛曹，本書的作者也提到，針對一些特定的需求醇滥，使用SVG結(jié)合CSS黎比，效果會(huì)更好。常用的解決問題的思路是：層疊鸳玩、重復(fù)阅虫。層疊可以前后元素指令不同，進(jìn)而產(chǎn)生覆蓋不跟、抵消颓帝，重復(fù)則可以創(chuàng)造整體效果。 如果要用好CSS窝革，還得參考下CSS標(biāo)準(zhǔn)規(guī)范购城，了解已有的指令功能，并根據(jù)目標(biāo)瀏覽器平臺(tái)虐译，確定支持程度瘪板。下面幾個(gè)網(wǎng)站可以參考：
我想過這個(gè)問題：究竟是什么讓CSS這么強(qiáng)大？是深思熟慮定義的統(tǒng)一概念漆诽，全面多樣的屬性設(shè)定侮攀，靈活強(qiáng)大的指令字、參數(shù)厢拭，以及它們的相互組合造就了這一切兰英。
本文后面給出當(dāng)下瀏覽器對W3C標(biāo)準(zhǔn)的支持程度，以得分為序蚪腐。
