CSS Sprites,用還是不用?

來源:互聯網
上載者:User

    看了前端觀察上的一片文章(http://www.qianduan.net/to-sprite-or-not-to-sprite.html),我在這裡自己小小的歸納一下。
    首先介紹下CSS Spirits。CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中,從而減少你的網站的HTTP請求數量。該圖片使用CSS background和background-position屬性渲染(值得一提的是,這也就意味著你的標籤變得更加複雜了,圖片是在CSS中定義,而非<img>標籤)。
    CSS Spirits的好處嘛,就是提高頁面的載入速度。
    但是如果我們沒有處理好圖片的話反而會適得其反。目前很多瀏覽器都有整頁縮放功能,瀏覽器就需要做一些額外的工作來糾正這些圖片邊緣的行為——基本上來說,是為了避免雪碧中相鄰的圖片被“露進來”。另外如果我們整合出來的圖片有大面積的空白又或是將高矮不一的圖片整合到一起,那隻會造成瀏覽器的負擔,浪費記憶體。下面是一些網友在該文評論中提到的CSS雪碧的某些不足:CSS 雪碧調用的圖片不能被列印,除非在@media中特別添加 print聲明——by RichB;如果要修改雪碧中的一個圖片,你就要修改整張圖片,這無疑會增大工作量——by Tom B。
    我個人認為如果是將尺寸類似的圖片整合在一起,那還是蠻有效,比如說導覽列的小表徵圖。只要我們處理得當,CSS Spirits還是蠻有用的。
    另外在文章的留言裡,大家還提出一個問題:repeat和no-repeat的圖片是不能放在一起?答案是,一般處理的好 no-repeat 和 repeat-x的放一起是沒有問題的,但是repeat-x和repeat-y的圖片放一起就要謹慎了。
   
    再貼一篇關於CSS Spirits的文章《 CSS Sprites:魚翅還是三鹿》,作者主張不要濫用CSS!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.