網(wǎng)頁設(shè)計中的CSS Sprites技術(shù)介紹及其優(yōu)化方法
發(fā)布時間:2012-05-31 09:57:34 作者:佚名
我要評論

CSS Sprites 技術(shù)對于廣大的前端工程師來說應(yīng)該是一點也不陌生。這個被國內(nèi)開發(fā)者昵稱為CSS精靈 CSS雪碧的家伙到底解決了什么問題,我們又怎樣合理使用這個技術(shù)呢?下面讓我們詳細的聊聊。

好了,如果我只說這些,那么這篇文章就有點太水了。前面那些只是對CSS Sprites技術(shù)的一個普及。作為一個開發(fā)者我們應(yīng)該對它有一個更全面的認(rèn)識,挖掘深度內(nèi)容,這樣才能有利于我們效率開發(fā),團隊協(xié)作。
頭疼的多人拼圖游戲
使用CSS Sprites,就好像玩拼圖游戲一樣。一張白畫布,那么多圖怎么放到里面去才會完美?這是個讓人糾結(jié)的事。而且在實際在工作場景中,我們面臨著項目開發(fā)時間緊張,UI設(shè)計圖要分期提供,多人協(xié)同開發(fā)一個項目等等問題。這些問題非常容易讓我們在大項目中迷失,造成CSS拼圖混亂,維護及其困難的情況。
定好規(guī)則,其實拼圖也挺好玩的
先期的準(zhǔn)備工作
應(yīng)對一個項目后期維護成本大的問題,我們最好的解決方案就是在開始前制定一系列的規(guī)范來限制問題的產(chǎn)品。好的開始是成功的一半。對于CSS Sprites,在項目開始前,我們要充分認(rèn)識一個產(chǎn)品,同UI設(shè)計師做好良好的溝通,對我們未來組成我們Sprites圖的各個元素有個大體的概念,比如我們的背景拼圖可能包括什么。
一個好的Sprite畫布是必須的
網(wǎng)頁設(shè)計里面,Grid系統(tǒng)是必不可少的,好的Grid能解決我們很多排版問題。Grid系統(tǒng)同樣適用于CSS Sprites。我們需要創(chuàng)建好一個優(yōu)秀的畫板,剩下的工作就是將元素合理的置于畫板中了。
這張是我準(zhǔn)備的一張CSS Sprites畫布,我們將在這個PSD里面組合項目中的圖片。
這張畫布是由20px*20px像素的格子組成。這個格子基本上由項目決定的,當(dāng)我們同UI設(shè)計師溝通了解這個項目最多的為16px*16px 圖標(biāo)時。我們就可以采用這種Grid尺寸為畫布了。

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

現(xiàn)在圖有了,怎么取圖也是關(guān)鍵
因為圖片盡可能的被整合到一張拼圖,所以我們需要在頁面使用圖片的位置使用空標(biāo)簽定位的方式將拼圖所需展現(xiàn)的部分展示到頁面中。
.iconA { display:inline-block; height:16px; width:16px; background:url(icons.png) -20px -20px no-repeat }
項目出現(xiàn)二期需求了,需要增加圖標(biāo)?
需求總是不能控制,我們要盡可能的為未來增加圖片做好打算。在剛才的例子的項目里后期產(chǎn)品需要增加圖標(biāo),于是:

及時的制定好規(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)绻谌粘5拈_發(fā)中,只要我們多注意總結(jié),敢于創(chuàng)新,敢于制定規(guī)范,那么再小的事也能干的很漂亮,對于CSS Sprites的優(yōu)化就是這么一個例子,你說不是么?
作者:青春的猴小野
文章來源:微博UDC
相關(guān)文章
通過CSS3的object-fit來調(diào)整圖片適配尺寸的技巧簡介
這篇文章主要介紹了通過CSS3的object-fit來調(diào)整圖片適配尺寸的技巧,包括用object-fit來居中并裁剪圖片的方法,需要的朋友可以參考下2016-02-27- 這篇文章主要介紹了CSS計數(shù)器counter()的用法,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-09-26
- 這篇文章主要介紹了CSS中的偽元素,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-08-01
- 這篇文章主要介紹了CSS中的各種選擇符,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-07-17
- 這篇文章主要介紹了Markdown.css樣式,用來實現(xiàn)顯示強大的Markdown樣式的文本,需要的朋友可以參考下2015-07-16
- CSS里一直有一個讓我們頭疼的問題,就是創(chuàng)建布局很麻煩。當(dāng)然,有很多方式,有很多技術(shù)都可以創(chuàng)建各種布局,但我們總覺得CSS里應(yīng)該提供一些新屬性,讓我們能更好的管理布局2014-05-03
定義css設(shè)備類型-Media Queries圖表簡介及使用方法
CSS3完美地解決了讓同一個網(wǎng)站同時適應(yīng)完全不同尺寸的屏幕這些問題;css3提出的MediaQueries解決了為網(wǎng)站設(shè)計不同的CSS樣式文件,如打印樣式表文件,手機樣式文件,電腦樣式2013-01-21css3背景圖片透明疊加屬性cross-fade簡介及用法實例
據(jù)說iOS6系統(tǒng)(iPhone5)增加了兩個CSS3屬性,一個是CSS3 filters – CSS3濾鏡另外一個是CSS3 Cross-fade – CSS3交叉淡入淡出,接下來為您介紹cross-fade屬性,感興趣的朋友2013-01-08- 本文主要介紹了通用的css hack2012-07-11
- 國外人士非常重視網(wǎng)站的易用性,相當(dāng)一部分外國站點已經(jīng)使用em作為字體單位.2009-12-27