CSS Sprites的概念、原理、適用範圍和優缺點

• CSS Sprites概念

  CSSSprites在國內不少人叫css精靈，是一種網頁圖片應用處理方式。它容許你將一個頁面涉及到的全部零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像之前那樣一幅一幅地慢慢顯示出來了。對於當前網絡流行的速度而言，不高於200KB的單張圖片的所需載入時間基本是差很少的，因此無需顧忌這個問題。

  加速的關鍵，不是下降質量，而是減小個數。傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按byte計算。客戶端每顯示一張圖片都會向服務器發送請求。因此，圖片越多請求次數越多，形成延遲的可能性也就越大。

   

  CSS Sprites技術不新鮮，早在2005年 CSS Zengarden 的園主 Dave Shea 就在 ALA 發表對該技術的 詳細闡述 。原先只在CSS玩家之間做爲一種網頁製做方法流傳，後來出來個 14 Rules for Faster-Loading Web Sites , 技術人員之間競相傳閱，其中第一條規則Make Fewer HTTP Requests就提到CSS Sprites。因而這個小妖精就火了起來，甚至出現了在線生成工具，勢不可擋也。近來國內不少blog都提到CSS Sprites，最著名的例子莫過於http://www.google.co.kr/ 下方的那幾個動畫。最新發布的YUI中，也是使用到CSS Sprites，幾乎都有的CSS裝飾圖都被一個 40×2000的圖 包辦。社交大站Facebook最近也使用了一個 22×1150的圖片 承擔了全部icon.一時間，CSS Sprites無處不在。

   

• 原理

  咱們知道，自CSS革命以降，HTML傾向於語義化，在通常狀況下再也不在標記裏寫裝飾性的內容而是把呈現的任務交給了CSS。GUI是繽紛多彩的，少不了各類漂亮的圖來裝點。新時代的生產方式是，在HTML佈滿各類各樣的鉤子（hook），而後交由CSS來處理。在須要用到圖片的時候，現階段是經過CSS屬性background-image組合background-repeat, background-position等來實現（題外話：爲什麼我提現階段，由於將來瀏覽器若支持content則又新增另外的實現方法）。咱們的主角是，你必定猜到了，就是background-position。經過調整background-position的數值，背景圖片就能以不一樣的面貌出如今你眼前。其實圖片總體面貌沒有變，因爲圖片位置的改變，你看到只該看到的而已。就比如手錶上的日期，你今天看到是21，明天看到是22，是由於它的position往上跳了一格。因此你也大概瞭解到，CSS Sprites通常只能使用到固定大小的盒子（box）裏，這樣纔可以遮擋住不該該看到的部分。

• css sprites 適用範圍：

  1，須要經過下降http請求數完成網頁加速。

  2，網頁中含有大量小圖標。或者，某些圖標通用性很強。

  3，網頁中有須要預載的圖片。主要是a與a:hover背景圖這種關係的。若是a與a:hover的背景圖分別加載，那麼，就會出現用戶鼠標移到某個按鈕上，按鈕的背景忽然消失再出來，產生「閃爍」，若是按鈕文字色與大背景相同或相近，就更囧了，有可能讓人產生按鈕「消失」了的錯覺。

   

• 須要知足的條件

  在網頁設計中，經過這項技術拼合在一塊兒的圖片最好有一項規律。定寬或者定高。最好是寬高都能定下來。須要平鋪的圖片，顯然不適合sprite。

  如上圖的buttons，就屬於定寬定高的狀況。

  定寬狀況下，則可平行排列若干小圖片。定高，則縱向排列小圖片。

  若背景既不定寬，也不定高狀況下強行使用css sprites技術，則容易產生「不該該出現的圖片出如今頁面上」的狀態。如果「強行定高」，也將很是不利於往後的維護。

• 優勢

  咱們從前面瞭解到，CSS Sprites爲何忽然跑火，跟可以提高網站性能有關。顯而易見，這是它的巨大優勢之一。普通製做方式下的大量圖片，如今合併成一個圖片，大大減小了HTTP的鏈接數。HTTP鏈接數對網站的加載性能有重要影響。

• 缺點

  至於可維護性，這是通常雙刃劍。可能有人喜歡，有人不喜歡，由於每次的圖片改動都得往這個圖片刪除或添加內容，顯得稍微繁瑣。並且算圖片的位置（尤爲是這種上千px的圖）也是一件頗爲不爽的事情。固然，在性能的口號下，這些都是能夠克服的。

  因爲圖片的位置須要固定爲某個絕對數值，這就失去了諸如center之類的靈活性。

  前面咱們也提到了，必須限制盒子的大小才能使用CSS Sprites，不然可能會出現出現干擾圖片的狀況。這就是說，在一些須要非單向的平鋪背景和須要網頁縮放的狀況下，CSS Sprites並不合適。YUI的解決方式是，加大圖片之間的距離，這樣能夠保持有限度的縮放。