網(wǎng)頁設(shè)計中的CSS Sprites技術(shù)介紹及其優(yōu)化方法

2024-07-11 08:48:13

字體：大中小

供稿：網(wǎng)友

談?wù)凜SS Sprites技術(shù)及其優(yōu)化三聯(lián)教程

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

　　Sprites畫布有了，接下來就是對圖標進行分組了
　　對于信息的歸納總結(jié)、分類是一個有意思的事情。就拿圖標來說，我們就可以根據(jù)圖標功能，尺寸等等作為信息維度進行歸納。其實無論怎么歸納，都是可以的，只是記得我們以一個方向作為標準就可以了。
　　下圖是根據(jù)微博站外某組件完成的CSS Sprites

　　根據(jù)設(shè)計，我們了解在這個頁面，需要將圖片元素根據(jù)功能分為4個維度，即微博品牌展示元素、提交按鈕、操作類小按鈕、提示類ICON。于是我將畫布 X軸坐標方向每5個格(其實完全可以10個格或者更多)劃分為一個區(qū)域，每個這樣一個區(qū)域的Y軸方向不再劃分區(qū)域，這樣做的目的是為了以后增加圖標的擴展性。于是我們可以非常快速得到一個圖標的坐標了。比如不可用的灰色的分享按鈕 X坐標=5*20px=100px Y坐標=7*20px=140px; 那么我們就取得了這個圖標的位置即background-position: -100px -140px。如果抽象成為公式的話，我們設(shè)置一個單元格的寬度為變量n。X坐標值Gx,Y坐標值Gy。那么畫布中的元素css背景即為：background-position:-Gx*npx –Gy*npx 了。
　　現(xiàn)在圖有了，怎么取圖也是關(guān)鍵
　　因為圖片盡可能的被整合到一張拼圖，所以我們需要在頁面使用圖片的位置使用空標簽定位的方式將拼圖所需展現(xiàn)的部分展示到頁面中。
　　.iconA { display:inline-block; height:16px; width:16px; background:url(icons.png) -20px -20px no-repeat }
　　項目出現(xiàn)二期需求了，需要增加圖標?
　　需求總是不能控制，我們要盡可能的為未來增加圖片做好打算。在剛才的例子的項目里后期產(chǎn)品需要增加圖標，于是：

　　我們可以繼續(xù)在對應(yīng)的圖區(qū)內(nèi)增加對應(yīng)的圖標。但是這個例子同樣暴露了一個缺陷，如果新增一個按鈕區(qū)域大于5n(100px)，我們的圖區(qū)不足以承載。這時候我們可以同產(chǎn)品，設(shè)計師溝通協(xié)調(diào)，商議是否可以取消過大的按鈕設(shè)計。如果需求一定，那我們只能沿著X軸方向繼續(xù)擴展畫布。不過，我們也需要注意無限的放大一張畫布，同樣會造成對頁面效率的影響。
　　及時的制定好規(guī)范，記錄好修改日志
　　可能在項目的初期，我們還來不及制定合圖的具體規(guī)范，在項目中我們會遇到各種各樣的問題。及時的總結(jié)，維護整張CSS拼圖，在拼圖的PSD或者PNG(使用Fireworks)做好注釋，方便他人開發(fā)。拼合好的圖片提交到svn時也寫明log內(nèi)容，這樣便日后查詢。

　　我們最終的目的
　　其實CSS Sprites經(jīng)過了那么多年的演變，前端開發(fā)者不斷的優(yōu)化，都是為了提升頁面效率，提升團隊開發(fā)效率，減少開發(fā)維護成本而努力。配合最近非常流行的將 CSS動態(tài)語言化(如SASS LESS等)，增加入變量，繼承，運算，函數(shù)等。CSS Sprites會變的更好玩，會減少更多的開發(fā)維護成本。甚至我們在“面向?qū)ο?rdquo;的模塊開發(fā)方式中，還可以使用一個類的的同一個backgroud- position：(x y)值，在不同的頁面通過引用不同的圖片(background屬性)實現(xiàn)將一個頁面內(nèi)圖片請求量進一步減少的目的。隨著高級瀏覽器的普及我們還可以多使用CSS3屬性，減少漸變背景圖的使用，將純色ICON制作成字體取代拼圖等我們能更大程度上減少圖片的使用量。這篇文章只是拋磚引玉。實際上還有很多關(guān)于CSS Sprites的方法，還有眾多的拼圖生成工具。
　　說了那么多，我們?nèi)绻谌粘５拈_發(fā)中，只要我們多注意總結(jié)，敢于創(chuàng)新，敢于制定規(guī)范，那么再小的事也能干的很漂亮，對于CSS Sprites的優(yōu)化就是這么一個例子，你說不是么?
　　作者：青春的猴小野
　　文章來源：微博UDC

上一篇：網(wǎng)頁設(shè)計中100個最常用的ClassName集合匯總

下一篇：站長應(yīng)該知道的提升站內(nèi)搜索體驗的22條優(yōu)化策略(圖文)