CSS Sprites對CSS布局的意義
本文和大家重點討論一下CSS Sprites對CSS布局的意義、優(yōu)點和缺點，普通制作方式下的大量圖片，現(xiàn)在CSS Sprites技術可以合并成一個圖片，大大減少了HTTP的連接數(shù)。HTTP連接數(shù)對網站的加載性能有重要影響。
CSS Sprites對CSS布局的意義、優(yōu)點和缺點介紹
CSS Sprites技術早在2005年CSSZengarden的園主DaveShea就在ALA發(fā)表對該技術的詳細闡述。
原先只在CSS玩家之間作為一種制作方法流傳，后來出來個14RulesforFaster-LoadingWebSites，技術人員之間競相傳閱，其中第一條規(guī)則MakeFewerHTTPRequests就提到CSS Sprites。于是這個小妖精就火了起來，甚至出現(xiàn)了在線生成工具，勢不可擋也。近來國內很多blog都提到CSS Sprites，最著名的例子莫過于google.co.kr下方的那幾個動畫。最新發(fā)布的YUI中，也是使用到CSS Sprites，幾乎都有的CSS裝飾圖都被一個40×2000的圖包辦。社交大站Facebook最近也使用了一個22×1150的圖片承擔了所有icon。一時間，CSS Sprites無處不在。
CSS Sprites工作原理
我們知道，自CSS革命以降，HTML傾向于語義化，在一般情況下不再在標記里寫裝飾性的內容而是把呈現(xiàn)的任務交給了CSS。GUI是繽紛多彩的，少不了各種漂亮的圖來裝點。新時代的生產方式是，在HTML布滿各種各樣的鉤子（hook），然后交由CSS來處理。
在需要用到圖片的時候，現(xiàn)階段是通過CSS屬性background-image組合background-repeat,background-position等來實現(xiàn)（題外話：為何我提現(xiàn)階段，因為未來瀏覽器若支持content則又新增另外的實現(xiàn)方法）。我們的主角是，你一定猜到了，就是background-position。通過調整background-position的數(shù)值，背景圖片就能以不同的面貌出現(xiàn)在你眼前。其實圖片整體面貌沒有變，由于圖片位置的改變，你看到只該看到的而已。就好比手表上的日期，你今天看到是21，明天看到是22，是因為它的position往上跳了一格。所以你也大概了解到，CSS Sprites一般只能使用到固定大小的盒子（box）里，這樣才能夠遮擋住不應該看到的部分。
我們使用YUI的sprite.png舉個例子，假如我們有這么一段代碼，max代表最大化，min代表最小化，我們需要給它們配上相應的漂亮圖片（這樣我們的網站才能夠吸引人）：
ExampleSourceCode
- <divclassdivclass="max">最大化</div>
- <divclassdivclass="min">最小化</div>
CSS Sprites優(yōu)點
我們從前面了解到，CSS Sprites為什么突然跑火，跟能夠提升網站性能有關。顯而易見，這是它的巨大優(yōu)點之一。普通制作方式下的大量圖片，現(xiàn)在合并成一個圖片，大大減少了HTTP的連接數(shù)。HTTP連接數(shù)對網站的加載性能有重要影響。
CSS Sprites缺點
至于可維護性，這是一般雙刃劍?？赡苡腥讼矚g，有人不喜歡，因為每次的圖片改動都得往這個圖片刪除或添加內容，顯得稍微繁瑣。而且算圖片的位置（尤其是這種上千px的圖）也是一件頗為不爽的事情。當然，在性能的口號下，這些都是可以克服的。
由于圖片的位置需要固定為某個絕對數(shù)值，這就失去了諸如center之類的靈活性。
前面我們也提到了，必須限制盒子的大小才能使用CSS Sprites，否則可能會出現(xiàn)出現(xiàn)干擾圖片的情況。這就是說，在一些需要非單向的平鋪背景和需要網頁縮放的情況下，CSS Sprites并不合適。YUI的解決方式是，加大圖片之間的距離，這樣可以保持有限度的縮放。
CSS Sprites總結
性能壓倒一切。CSS Sprites是值得推廣的一種技術。尤其適宜用于FIR，比如固定大小的icon替換。為保持兼容性，圖片中的各個部分保持一定的距離是一種不錯的做法。
【編輯推薦】
