使用CSS Sprites就好像玩拼圖遊戲一(yī)樣
在大(dà)家還在撥号上網的“遠古時期”，由于網速的限制，頁面開(kāi)發者都喜歡把網頁裏面的圖片字節數控制的非常小(xiǎo)，往往在一(yī)個圖片文件夾裏散落着n多的小(xiǎo)碎圖。随着網絡技術的發展，網速的提升，大(dà)家越來越重視頁面的加載速度、頁面效率問題，過去(qù)的那些小(xiǎo)圖便成爲了前端開(kāi)發者的眼中(zhōng)釘，因爲每加載一(yī)張圖片都會産生(shēng)一(yī)次浏覽器請求數，發起的請求數越多那麽頁面加載的速度也越慢(màn)。還有當頁面加載時，圖片一(yī)個個的零星顯示，鼠标經過時候背景閃白(bái)等也都是我(wǒ)(wǒ)們不能忍受的。于是乎将頁面中(zhōng)的背景圖整合到一(yī)起，利用“background-image”，“background- repeat”，“background-position”的組合進行背景定位的技術被廣泛使用與了頁面構建中(zhōng)，這就是CSS Sprites。當然CSS Sprites技術也存在着維護不便，内存占用大(dà)等等的缺點。
上面這些隻是對CSS Sprites技術的一(yī)個普及。作爲一(yī)個開(kāi)發者我(wǒ)(wǒ)們應該對它有一(yī)個更全面的認識，挖掘深度内容，這樣才能有利于我(wǒ)(wǒ)們效率開(kāi)發，團隊協作。
頭疼的多人拼圖遊戲
使用CSS Sprites，就好像玩拼圖遊戲一(yī)樣。一(yī)張白(bái)畫布，那麽多圖怎麽放(fàng)到裏面去(qù)才會完美？這是個讓人糾結的事。而且在實際在工(gōng)作場景中(zhōng)，我(wǒ)(wǒ)們面臨着項目開(kāi)發時間緊張，UI設計圖要分(fēn)期提供，多人協同開(kāi)發一(yī)個項目等等問題。這些問題非常容易讓我(wǒ)(wǒ)們在大(dà)項目中(zhōng)迷失，造成CSS拼圖混亂，維護及其困難的情況。
定好規則，其實拼圖也挺好玩的。
先期的準備工(gōng)作
應對一(yī)個項目後期維護成本大(dà)的問題，我(wǒ)(wǒ)們最好的解決方案就是在開(kāi)始前制定一(yī)系列的規範來限制問題的産品。好的開(kāi)始是成功的一(yī)半。對于CSS Sprites，在項目開(kāi)始前，我(wǒ)(wǒ)們要充分(fēn)認識一(yī)個産品，同UI設計師做好良好的溝通，對我(wǒ)(wǒ)們未來組成我(wǒ)(wǒ)們Sprites圖的各個元素有個大(dà)體(tǐ)的概念，比如我(wǒ)(wǒ)們的背景拼圖可能包括什麽。
一(yī)個好的Sprite畫布是必須的
網頁設計裏面，Grid系統是必不可少的，好的Grid能解決我(wǒ)(wǒ)們很多排版問題。Grid系統同樣适用于CSS Sprites。我(wǒ)(wǒ)們需要創建好一(yī)個優秀的畫闆，剩下(xià)的工(gōng)作就是将元素合理的置于畫闆中(zhōng)了。