Css Sprite過時了嗎？

1. 當前形式

目前網上有一些言論說Css Sprite已經過時了，理由一般主要為以下幾個觀點：

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

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

• 圖片不能靈活設置樣式；

• 一張圖崩了整個網頁的圖標就都崩了；

• 圖標位置確定后就不好再修改了；

• 為了適應不同的分辨率需要準備多個規格的圖片。

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

但是依然還是有相當一部分項目在用Css Sprite，證明其依然還在發揮余熱。

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

2. Css Sprite的劣勢

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

• 要預留足夠的空間，防止板塊內出現不必要的背景；

• 自適應頁面時，如果Css Sprite如果不夠寬，很容易出現背景斷裂；

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

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

3. 那些在用Css Sprite的知名網站

新浪微博

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

再點開這個圖片可以發現：

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

百度

當我們點開百度的時候會發現它的圖標也是Css Sprite：

它的圖標是靠著Css Sprite中不同的圖標來切換顏色的。

淘寶

再來看看淘寶網，它也使用了一些Css Sprite來支持圖標的切換：

這三個網站幾乎是國內最流行的三個網站了，但是這還并沒有展現出Css Sprite的潛力，在最后我們將會以實戰的形式帶領大家使用Css Sprite來制作無限循環的炫酷動畫效果。

4. 小結

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

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

好多網頁小游戲或者一些網頁炫酷動畫就用到了Css Sprite的幀動畫技術，那么接下來就讓我們開啟Css Sprite的學習之旅吧！