CSS Sprites技術(shù)不新鮮，早在2005年 CSS Zengarden 的園主 Dave Shea就在ALA發(fā)表對(duì)該技術(shù)的詳細(xì)闡述。原先只在CSS玩家之間作為一種制作方法流傳，后來(lái)出來(lái)個(gè)14 Rules for Faster-Loading Web Sites, 技術(shù)人員之間競(jìng)相傳閱，其中第一條規(guī)則Make Fewer HTTP Requests就提到CSS Sprites。于是這個(gè)小妖精就火了起來(lái)，甚至出現(xiàn)了在線生成工具，勢(shì)不可擋也。近來(lái)國(guó)內(nèi)很多blog都提到CSS Sprites，最著名的例子莫過(guò)于 http://www.google.co.kr/ 下方的那幾個(gè)動(dòng)畫(huà)。最新發(fā)布的YUI中，也是使用到CSS Sprites，幾乎都有的CSS裝飾圖都被一個(gè)40×2000的圖包辦。社交大站Facebook最近也使用了一個(gè)22×1150的圖片承擔(dān)了所有icon. 一時(shí)間，CSS Sprites無(wú)處不在。

原理

我們知道，HTML傾向于語(yǔ)義化，在一般情況下不再在標(biāo)記里寫(xiě)裝飾性的內(nèi)容而是把呈現(xiàn)的任務(wù)交給了CSS。GUI是繽紛多彩的，少不了各種漂亮的圖來(lái)裝點(diǎn)。新時(shí)代的生產(chǎn)方式是，在HTML布滿各種各樣的鉤子（hook），然后交由CSS來(lái)處理。在需要用到圖片的時(shí)候，現(xiàn)階段是通過(guò)CSS屬性background-image組合background-repeat, background-position等來(lái)實(shí)現(xiàn)（題外話：為何我提現(xiàn)階段，因?yàn)槲磥?lái)瀏覽器若支持content則又新增另外的實(shí)現(xiàn)方法）。我們的主角是，你一定猜到了，就是background-position。通過(guò)調(diào)整background-position的數(shù)值，背景圖片就能以不同的面貌出現(xiàn)在你眼前。其實(shí)圖片整體面貌沒(méi)有變，由于圖片位置的改變，你看到只該看到的而已。就好比手表上的日期，你今天看到是21，明天看到是22，是因?yàn)樗?strong>position往上跳了一格。所以你也大概了解到，CSS Sprites一般只能使用到固定大小的盒子（box）里，這樣才能夠遮擋住不應(yīng)該看到的部分。

我們使用YUI的sprite.png舉個(gè)例子，假如我們有這么一段代碼，max代表最大化，min代表最小化，我們需要給它們配上相應(yīng)的漂亮圖片（這樣我們的網(wǎng)站才能夠吸引人，才可以賣(mài)錢(qián)，才可以到佛羅里達(dá)曬太陽(yáng):D）：

<div class="max">最大化</div>
<div class="min">最小化</div>

這兩個(gè)class都使用同一個(gè)圖片：

.min, .max {
  width:16px;
  height:16px;
  background-image:url(http://developer.yahoo.com/yui/build/assets/skins/sam/sprite.png);
  background-repeat: no-repeat; /*我們并不想讓它平鋪*/
  text-indent:-999em; /*隱藏文本的一種方法*/
}

效果如下：

我們看到一團(tuán)灰，沒(méi)錯(cuò)，因?yàn)槲覀冞€沒(méi)有指定background-position，默認(rèn)為 0 0，可以看下sprite.png, 處于這個(gè)位置正是灰塊。好了，我們要找到代表最大化的加號(hào)和代表最小化的減號(hào)的位置找出來(lái)。經(jīng)過(guò)測(cè)量，最大化按鈕位于Y軸的350px處，最小化按鈕位于Y軸400px處。想一想我們?nèi)绾尾拍茏屗鼈兡軌蝻@示出來(lái)呢，明顯，要向上提升sprite.png，得到代碼如下：

.max {
  background-position: 0 -350px;
}
.min {
  background-position: 0 -400px;
}

耶，我們成功了：

（注意：為了舉例的方便，本例子直接在HTML內(nèi)置樣式，切勿在實(shí)踐中的非特殊情況使用這種方式）。

優(yōu)點(diǎn)

我們從前面了解到，CSS Sprites為什么突然跑火，跟能夠提升網(wǎng)站性能有關(guān)。顯而易見(jiàn)，這是它的巨大優(yōu)點(diǎn)之一。普通制作方式下的大量圖片，現(xiàn)在合并成一個(gè)圖片，大大減少了HTTP的連接數(shù)。HTTP連接數(shù)對(duì)網(wǎng)站的加載性能有重要影響。

缺點(diǎn)

至于可維護(hù)性，這是一般雙刃劍?？赡苡腥讼矚g，有人不喜歡，因?yàn)槊看蔚膱D片改動(dòng)都得往這個(gè)圖片刪除或添加內(nèi)容，顯得稍微繁瑣。而且算圖片的位置（尤其是這種上千px的圖）也是一件頗為不爽的事情。當(dāng)然，在性能的口號(hào)下，這些都是可以克服的。

由于圖片的位置需要固定為某個(gè)絕對(duì)數(shù)值，這就失去了諸如center之類(lèi)的靈活性。

前面我們也提到了，必須限制盒子的大小才能使用CSS Sprites，否則可能會(huì)出現(xiàn)出現(xiàn)干擾圖片的情況。這就是說(shuō)，在一些需要非單向的平鋪背景和需要網(wǎng)頁(yè)縮放的情況下，CSS Sprites并不合適。YUI的解決方式是，加大圖片之間的距離，這樣可以保持有限度的縮放。

總結(jié)

性能壓倒一切。CSS Sprites是值得推廣的一種技術(shù)。尤其適宜用于FIR，比如固定大小的icon替換。為保持兼容性，圖片中的各個(gè)部分保持一定的距離是一種不錯(cuò)的做法。

推薦閱讀：

• CSS Sprites: Image Slicing’s Kiss of Death
• 14 Rules for Faster-Loading Web Sites
• High Performance Web Sites

更新：有網(wǎng)友問(wèn)到IE6不支持png的問(wèn)題。其實(shí)是IE6不支持的是半透明（alpha transparency）的png，對(duì)于全透明的png, IE6并不存在問(wèn)題。因此，在實(shí)踐中，不涉及到半透明而需要透明背景的圖片，其實(shí)都可以使用png, 這是很安全的。

最新評(píng)論