Css Sprite過時了嗎？

1. 當(dāng)前形式

目前網(wǎng)上有一些言論說Css Sprite已經(jīng)過時了，理由一般主要為以下幾個觀點(diǎn)：

• 在 HTTP2 的場景下Css Sprite便失去了意義；

• 一些簡單的圖標(biāo)直接用 CSS 或者 SVG 就可以搞定；

• 圖片不能靈活設(shè)置樣式；

• 一張圖崩了整個網(wǎng)頁的圖標(biāo)就都崩了；

• 圖標(biāo)位置確定后就不好再修改了；

• 為了適應(yīng)不同的分辨率需要準(zhǔn)備多個規(guī)格的圖片。

首先不得不承認(rèn)的是由于 SVG、iconfont 的沖擊，Css Sprite確實(shí)比以前用的少了，iconfont 也確實(shí)很好用。

但是依然還是有相當(dāng)一部分項(xiàng)目在用Css Sprite，證明其依然還在發(fā)揮余熱。

而且在序列幀動畫這一領(lǐng)域內(nèi)Css Sprite的用處還很大，最后的兩個章節(jié)我們就會講到序列幀動畫以及為何適用于Css Sprite。

2. Css Sprite的劣勢

既然網(wǎng)上有這種言論存在，那么必然證明Css Sprite也存在著一定的劣勢：

• 要預(yù)留足夠的空間，防止板塊內(nèi)出現(xiàn)不必要的背景；

• 自適應(yīng)頁面時，如果Css Sprite如果不夠?qū)挘�很容易出現(xiàn)背景斷裂；

• 在開發(fā)的時候比較麻煩，要通過 PhotoShop 或其他工具測量計(jì)算每一個背景單元的精確位置，這是體力活，雖然沒什么難度，但是很繁瑣；

• 如果某個圖標(biāo)有少許改動，一般就要重新排列這張合并的圖片。

3. 那些在用Css Sprite的知名網(wǎng)站

新浪微博

咱們打開新浪微博，然后隨便找個帶皇冠的，按下F12鍵(Mac用戶按command+option+i)然后選中控制臺的箭頭，再點(diǎn)擊皇冠：

再點(diǎn)開這個圖片可以發(fā)現(xiàn)：

可以看到那些大 V 圖標(biāo)皇冠圖標(biāo)以及各種微博認(rèn)證等圖標(biāo)，都是放在了一張Css Sprite里(即使再牛的大 V，身份標(biāo)志也是放在Css Sprite中的)。

百度

當(dāng)我們點(diǎn)開百度的時候會發(fā)現(xiàn)它的圖標(biāo)也是Css Sprite：

它的圖標(biāo)是靠著Css Sprite中不同的圖標(biāo)來切換顏色的。

淘寶

再來看看淘寶網(wǎng)，它也使用了一些Css Sprite來支持圖標(biāo)的切換：

這三個網(wǎng)站幾乎是國內(nèi)最流行的三個網(wǎng)站了，但是這還并沒有展現(xiàn)出Css Sprite的潛力，在最后我們將會以實(shí)戰(zhàn)的形式帶領(lǐng)大家使用Css Sprite來制作無限循環(huán)的炫酷動畫效果。

4. 小結(jié)

如果你有選擇困難癥的話，我可以給你個小小的建議：兼容性要求高的用Css Sprite、不怎么考慮兼容性的新項(xiàng)目用iconfont。

但Css Sprite也并不僅僅只是能做個圖標(biāo)而已，如果是幀動畫技術(shù)的話Css Sprite是難以替代的。

好多網(wǎng)頁小游戲或者一些網(wǎng)頁炫酷動畫就用到了Css Sprite的幀動畫技術(shù)，那么接下來就讓我們開啟Css Sprite的學(xué)習(xí)之旅吧！