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