|
編碼和維護(hù)的時(shí)間成本會(huì)增加
圖片切片輸出之后，麻煩依然存在。雖然習(xí)慣這個(gè)過(guò)程之后，按鈕 sprite 可以很簡(jiǎn)單地編碼到 CSS 中，但是其他的 sprites 就不這么簡(jiǎn)單了。
單一的一個(gè)按鈕一般會(huì)是個(gè)有定寬的 <ul> 元素。假如按鈕的 sprite 是彼此獨(dú)立的，就比較簡(jiǎn)單：<ul> 的寬高會(huì)和列表項(xiàng)和錨點(diǎn)的寬高一致，每個(gè)狀態(tài)的 sprite 對(duì)齊擺放。sprite 的位置也可以很容易地根據(jù)每個(gè)按鈕的寬高計(jì)算出來(lái)。
但是遇到之前提到的，像 Amazon 或者 Google 用到的大型 sprite 的情況時(shí)，會(huì)怎么樣呢？你能想象到到維護(hù)這么一個(gè)文件，并且在 CSS 中改變 sprite 項(xiàng)的位置會(huì)是什么樣嗎？還有第一次創(chuàng)建 CSS 代碼的情況？相對(duì)于一個(gè)可以輕松計(jì)算出來(lái)狀態(tài)位置的簡(jiǎn)單按鈕來(lái)說(shuō)，大型的 sprite 會(huì)導(dǎo)致無(wú)盡地測(cè)試和圖片狀態(tài)的重新擺放。
一些用于定位 Google 的 sprite 圖片的樣式
Amazon 的 sprites 確實(shí)節(jié)省了至少 30 個(gè) HTTP 連接，性能方面也確實(shí)有了很大的提高。但是把這些好處拿來(lái)和開(kāi)發(fā)以及維護(hù)成本做個(gè)比較，再把緩存和網(wǎng)速等因素考慮進(jìn)來(lái)，決定使用如此大型的 sprites 也許就不那么令人信服了。 Sprites 是否真的需要“維護(hù)”？
當(dāng)然了，有些人不覺(jué)得 sprite 是首要引起頭疼的問(wèn)題。大部分情況下，一個(gè) sprite 創(chuàng)建并編碼完之后，就很少會(huì)被改動(dòng)了，也不會(huì)受進(jìn)行中的網(wǎng)站維護(hù)的影響。假如你感覺(jué) sprite 維護(hù)不是個(gè)問(wèn)題的話，那么也許使用大型 sprite 是最好的選擇。 不是所有圖片都是背景
另一個(gè)不提倡濫用 CSS sprite 的理由是這會(huì)導(dǎo)致開(kāi)發(fā)人員錯(cuò)誤地使用背景圖片。有經(jīng)驗(yàn)的開(kāi)發(fā)人員會(huì)在項(xiàng)目中考慮可訪問(wèn)性問(wèn)題，他們明白并不是每個(gè)圖片都是背景。背景圖片應(yīng)該留給按鈕以及用來(lái)裝飾元素，而用來(lái)傳達(dá)重要信息的圖像應(yīng)該內(nèi)聯(lián)在 XHTML 中。
Amazon 正確是使用了內(nèi)聯(lián)圖像元素和裝飾用的背景。
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁(yè) CSS Sprites:有用技術(shù)or潛在麻煩 [1] 下一頁(yè) CSS Sprites:有用技術(shù)or潛在麻煩 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) CSS Sprites:有用技術(shù)or潛在麻煩 [2]
