CSS精靈

許多檢視器使用者介面元素都是使用點陣圖圖案來設定樣式,而且擁有多個不同的視覺狀態。 一個很好的範例是通常至少具有三種不同狀態的按鈕:「向上」、「向上」和「向下」。 每個狀態都需要指定自己的點陣圖圖稿。

透過傳統的樣式設定方法,CSS會針對使用者介面元素的各個狀態,對伺服器上的個別影像檔案提供個別參考。 以下為樣式放大按鈕的CSS範例:

.s7spinviewer.s7mouseinput .s7zoominbutton[state='up'] {
background-image:url(images/v2/ZoomInButton_dark_up.png);
}
.s7spinviewer.s7mouseinput .s7zoominbutton[state='over'] {
background-image:url(images/v2/ZoomInButton_dark_over.png);
}
.s7spinviewer.s7mouseinput .s7zoominbutton[state='down'] {
background-image:url(images/v2/ZoomInButton_dark_down.png);
}
.s7spinviewer.s7mouseinput .s7zoominbutton[state='disabled'] {
background-image:url(images/v2/ZoomInButton_dark_disabled.png);
}

此方法的缺點是第一次與元素互動時,一般使用者會遇到使用者介面回應忽隱忽現或延遲的情況。 發生此動作是因為尚未下載新元素狀態的影像圖稿。 此外,由於對伺服器的HTTP呼叫數量增加,此方法可能會對效能造成輕微的負面影響。

CSS sprite是一種不同的方法,將所有元素狀態的影像圖稿合併到稱為「sprite」的單一PNG檔案中。 此類「sprite」具有特定元素的所有視覺狀態,且會逐一定位。 使用拼寫來設定使用者介面元素的樣式時,CSS中所有不同的狀態都會參照相同的sprite影像。 此外,background-position屬性會用於每個狀態,以指定使用「sprite」影像的哪一部分。 您可以以任何適當的方式建構「Sprite」影像。 檢視器通常會垂直棧疊。 以下是以「sprite」為基礎的範例,說明如何從上方設定相同放大按鈕的樣式:

.s7spinviewer .s7zoominbutton[state]  {
    background-image: url(images/v2/ZoomInButton_dark_sprite.png);
}
.s7spinviewer.s7mouseinput .s7zoominbutton[state='up'] {
background-position: -84px -560px;
}
.s7spinviewer.s7mouseinput .s7zoominbutton[state='over'] {
background-position: -56px -560px;
}
.s7spinviewer.s7mouseinput .s7zoominbutton[state='down'] {
background-position: -28px -560px;
}
.s7spinviewer.s7mouseinput .s7zoominbutton[state='disabled'] {
background-position: -0px -560px;
}