首頁 > 網頁教程 > CSS > CSS Sprites(CSS精靈)技術及其優化經驗分享

昂热西方天主教大学:CSS Sprites(CSS精靈)技術及其優化經驗分享

時間:2012-05-20    作者:青春的猴小野   來源:微博UDC

法国昂热国立音乐学院 www.sxrkbx.com.cn CSS Sprites 技術對于廣大的前端工程師來說應該是一點也不陌生。這個被國內開發者昵稱為CSS精靈、CSS雪碧的家伙到底解決了什么問題,我們又怎樣合理使用這個技術呢?下面讓我們詳細的聊聊。

在大家還在撥號上網的“遠古時期”,由于網速的限制,頁面開發者都喜歡把網頁里面的圖片字節數控制的非常小,往往在一個圖片文件夾里散落著n多的小碎圖。隨著網絡技術的發展,網速的提升,大家越來越重視頁面的加載速度,頁面效率問題,過去的那些小圖便成為了前端開發者的眼中釘,因為每加載一張圖片都會產生一次瀏覽器請求數,發起的請求數越多那么頁面加載的速度也越慢?;褂械幣趁婕釉厥?,圖片一個個的零星顯示,鼠標經過時候背景閃白等也都是我們不能忍受的。于是乎將頁面中的背景圖整合到一起,利用“background-image”,“background- repeat”,“background-position”的組合進行背景定位的技術被廣泛使用與了頁面構建中,這就是CSS Sprites。當然CSS Sprites技術也存在著維護不便,內存占用大等等的缺點。

好了,如果我只說這些,那么這篇文章就有點太水了。前面那些只是對CSS Sprites技術的一個普及。作為一個開發者我們應該對它有一個更全面的認識,挖掘深度內容,這樣才能有利于我們效率開發,團隊協作。

頭疼的多人拼圖游戲

使用CSS Sprites,就好像玩拼圖游戲一樣。一張白畫布,那么多圖怎么放到里面去才會完美?這是個讓人糾結的事。而且在實際在工作場景中,我們面臨著項目開發時間緊張,UI設計圖要分期提供,多人協同開發一個項目等等問題。這些問題非常容易讓我們在大項目中迷失,造成CSS拼圖混亂,維護及其困難的情況。

定好規則,其實拼圖也挺好玩的

先期的準備工作

應對一個項目后期維護成本大的問題,我們最好的解決方案就是在開始前制定一系列的規范來限制問題的產品。好的開始是成功的一半。對于CSS Sprites,在項目開始前,我們要充分認識一個產品,同UI設計師做好良好的溝通,對我們未來組成我們Sprites圖的各個元素有個大體的概念,比如我們的背景拼圖可能包括什么。

一個好的Sprite畫布是必須的

網頁設計里面,Grid系統是必不可少的,好的Grid能解決我們很多排版問題。Grid系統同樣適用于CSS Sprites。我們需要創建好一個優秀的畫板,剩下的工作就是將元素合理的置于畫板中了。

這張是我準備的一張CSS Sprites畫布,我們將在這個PSD里面組合項目中的圖片。

這張畫布是由20px*20px像素的格子組成。這個格子基本上由項目決定的,當我們同UI設計師溝通了解這個項目最多的為16px*16px 圖標時。我們就可以采用這種Grid尺寸為畫布了。

Sprites畫布有了,接下來就是對圖標進行分組了

對于信息的歸納總結、分類是一個有意思的事情。就拿圖標來說,我們就可以根據圖標功能,尺寸等等作為信息維度進行歸納。其實無論怎么歸納,都是可以的,只是記得我們以一個方向作為標準就可以了。

下圖是根據微博站外某組件完成的CSS Sprites

根據設計,我們了解在這個頁面,需要將圖片元素根據功能分為4個維度,即微博品牌展示元素、提交按鈕、操作類小按鈕、提示類ICON。于是我將畫布X軸坐標方向每5個格(其實完全可以10個格或者更多)劃分為一個區域,每個這樣一個區域的Y軸方向不再劃分區域,這樣做的目的是為了以后增加圖標的擴展性。于是我們可以非??燜俚玫揭桓鐾急甑淖炅?。比如不可用的灰色的分享按鈕 X坐標=5*20px=100px Y坐標=7*20px=140px; 那么我們就取得了這個圖標的位置即background-position: -100px -140px。如果抽象成為公式的話,我們設置一個單元格的寬度為變量n。X坐標值Gx,Y坐標值Gy。那么畫布中的元素css背景即為:background-position:-Gx*npx –Gy*npx 了。

現在圖有了,怎么取圖也是關鍵

因為圖片盡可能的被整合到一張拼圖,所以我們需要在頁面使用圖片的位置使用空標簽定位的方式將拼圖所需展現的部分展示到頁面中。

<span class="iconA"></span>

.iconA { display:inline-block; height:16px; width:16px; background:url(icons.png) -20px -20px no-repeat }

項目出現二期需求了,需要增加圖標?

需求總是不能控制,我們要盡可能的為未來增加圖片做好打算。在剛才的例子的項目里后期產品需要增加圖標,于是:

我們可以繼續在對應的圖區內增加對應的圖標。但是這個例子同樣暴露了一個缺陷,如果新增一個按鈕區域大于5n(100px),我們的圖區不足以承載。這時候我們可以同產品,設計師溝通協調,商議是否可以取消過大的按鈕設計。如果需求一定,那我們只能沿著X軸方向繼續擴展畫布。不過,我們也需要注意無限的放大一張畫布,同樣會造成對頁面效率的影響。

及時的制定好規范,記錄好修改日志

可能在項目的初期,我們還來不及制定合圖的具體規范,在項目中我們會遇到各種各樣的問題。及時的總結,維護整張CSS拼圖,在拼圖的PSD或者PNG(使用Fireworks)做好注釋,方便他人開發。拼合好的圖片提交到svn時也寫明log內容,這樣便日后查詢。

我們最終的目的

其實CSS Sprites經過了那么多年的演變,前端開發者不斷的優化,都是為了提升頁面效率,提升團隊開發效率,減少開發維護成本而努力。配合最近非常流行的將CSS動態語言化(如SASS LESS等),增加入變量, 繼承, 運算, 函數等。CSS Sprites會變的更好玩,會減少更多的開發維護成本。甚至我們在“面向對象”的??榭⒎絞街?,還可以使用一個類的的同一個backgroud-position:(x y)值,在不同的頁面通過引用不同的圖片(background屬性)實現將一個頁面內圖片請求量進一步減少的目的。隨著高級瀏覽器的普及我們還可以多使用CSS3屬性,減少漸變背景圖的使用,將純色ICON制作成字體取代拼圖等我們能更大程度上減少圖片的使用量。這篇文章只是拋磚引玉。實際上還有很多關于CSS Sprites的方法,還有眾多的拼圖生成工具。

說了那么多,我們如果在日常的開發中,只要我們多注意總結,敢于創新,敢于制定規范,那么再小的事也能干的很漂亮,對于CSS Sprites的優化就是這么一個例子,你說不是么?

相關推薦
CSS Sprite(CSS精靈)的優點和使用方法
用CSS Sprite玩圖片整合 加速頁面下載
CSS:清除多余的標簽讓代碼更加有意義
DIV+CSS布局兩列右列寬度自適應布局的不同實現方法
CSS排版中常遇到的五個問題及解決辦法
CSS網頁布局有關中文排版的九個技巧
詳解如何用div+css模擬表格對角線
Firefox與IE瀏覽器在CSS樣式表中的差異
加一段代碼讓IE6支持hover偽類效果
用CSS來控制字符長度和顯示長度
CSS代碼不同書寫風格的優缺點
如何使一個DIV層居中于瀏覽器中?
正確理解CSS規則的優先級算法
創建高效CSS代碼的五個好習慣
最新全面兼容ie6,ie7,ie8,ff的CSS HACK寫法
理解CSS的查找匹配原理,打造簡潔高效的CSS代碼
掌握跨瀏覽器兼容的CSS代碼編寫準則
21個令人驚嘆的CSS技術(案例)展示
CSS框架到底有那些優點與缺點?
如何使用CSS控制網頁打印頁面格式?
深入理解CSS的margin屬性(外邊距)
CSS中30個最常用的選擇器,你學會了嗎?
CSS進階:用Margin還是用Padding?
WEB前端開發應該注意的問題8點(原創技巧)
xhtml+css 復雜的視覺效果解決方案與技巧(原創技巧)
CSS新手入門教程:CSS代碼編寫須注意的八大細節
資深seo利用css樣式作弊手法全解
CSS新手教程:30個CSS常見問題的分析及解決方法
10種導致CSS布局頁面錯亂的解決方法分享
css教程:解決float屬性的元素父元素高度不能自適應
CSS教程:清理浮動簡潔有效的方式分享
IE6下文字或圖片神秘消失的原因及解決方法分享
CSS相對定位實現div容器絕對居中的簡單方法分享
8種CSS清除浮動的方法優缺點分析
高效CSS開發需要注意的要點以及提升性能的做法
CSS3實現透明邊框的方法分享

精彩推薦

熱門教程