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