MOBILE WEB程式設計--第二版

行動瀏覽器 CSS

|

407

不建議在大型的檔案或照片使用 CSS sprites。如果你使用的是 PNG 圖

像，最佳的方式是以顏色一致的色板來將圖示群組化。

CSS Sprites 替代方案

即使你不想要使用 CSS sprites，但降低請求伺服器的次數仍然是一種很有吸引力的概

念，因此在某些特別的情況下，我們會尋求這項技術替代方案。

提到 CSS sprites 替代方案，腦海中浮現的第一種技術是影像地圖。但是

不建議在非觸控導覽使用它們，因為在非觸控設備上，影像地圖會對使用

性造成負面的影響。

內嵌圖像

如上一章所述，內嵌圖像對相容的瀏覽器而言是項很棒的技術。當我們為可瞭解它們的

瀏覽器進行設計時，可以複製第一個樣本（沒有 CSS sprites 的原始文件）並以

data:

來

取代每一張圖像的 URL。

結合圖像

如果圖像之間的上下或左右距離非常靠近，如我們的範例所示，可考慮將所有圖像結合

為一張。這個概念與 CSS sprites 很類似，但我們將圖像設定為單一用途的背景，調整邊

距與內距，讓元素適當地對齊圖像的各個部分。在對邊距與內距的支援有限的舊式設備

上，這項技術會產生不良的結果。

如果我們使用原始的程式碼，但在伺服器上定義一個良好的快取策略，這

個網站的網頁載入速度會比使用 CSS sprites 的時候快，因為此時不需要

進行轉譯。