您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > IMG Sprite：針對高對比度模式的優(yōu)化技巧

IMG Sprite：針對高對比度模式的優(yōu)化技巧

文章來源：365jz.com 點擊數(shù)：223 更新時間：2011-05-18 16:09 參與評論

注：高對比度模式是一種Windows系統(tǒng)設置主題，其意是為了保證視力受損用戶查看信息的方便。它通過使用對比鮮明的色彩和字體大小提高文本的可讀性。高對比度模式下網(wǎng)頁的背景默認會變成全黑。

CSS image sprites是一項用來減少網(wǎng)頁中圖片HTTP請求數(shù)的技術(shù)，但因其會導致在windows高對比度模式下圖片消失的問題，故其導致的web應用性能的提升和對無障礙體驗被破壞之間的矛盾正逐漸引起大家的關(guān)注。導致這一問題的原因是這一技術(shù)通常是應用CSS的“background-image”這一屬性來創(chuàng)建的。

為了證明這個問題，我們在高對比度模式下瀏覽一些當下的知名網(wǎng)站（上面的是普通模式，下面的是高對比度模式）：

在Google Video中，前后選項的按鈕消失了：

在雅虎法國的網(wǎng)站中，導航項和按鈕消失了：

同樣在Facebook、亞馬遜和AOL音樂中，LOGO也消失了：

同樣，流行的內(nèi)容共享服務的按鈕也沒了：

Sprite技術(shù)的使用的確為更多網(wǎng)站的優(yōu)化加載速度的體驗貢獻甚大，但我們要承認，這個過程中我們忽略并損害了使用高對比度模式用戶的體驗。

<img> Sprites 的介紹

在對應用了新的企業(yè)標識文字的圖形化標題（圖片展示標題）的AOL.com的新的設計中，我決定嘗試多年前就想過卻一直沒使用的東西。

由于<img>元素可以在高對比度模式下顯示，那么為什么我們不可以通過裁剪圖片的方式來完成我們想要的效果呢？

這個案例中我們的圖形化標題的HTML結(jié)果是下面這個樣子：

<h2 class="popular"><img src="img-sprite.png" alt="" />Popular</h2>
<h2 class="featured"><img src="img-sprite.png" alt="" />Featured</h2>

我們把alt屬性值設置為空以便屏幕閱讀器可以越過它們，我們在標題中寫了如“Featured”這樣的文字以便搜索引擎可以知道這部分是關(guān)于什么的（這可比在alt里添加來得實用）。

下面的是我們要設置的CSS：

h2 {
overflow: hidden;
position: relative;
height: 50px;
width: 200px;
}

h2 img {
position: relative;
}

h2.popular img {
top: -100px;
}

h2.featured img {
top: -200px;
}

不解釋了，相信大家一眼就能看明白這是怎么回事。

關(guān)于測試環(huán)境

有2種方法進入高對比度模式

【一】帶有強迫癥性質(zhì)的按部就班法：

開始菜單 -- 控制面板

打開輔助功能選項

點擊“顯示”

勾選“使用高對比度”

確認

【二】懶人萬歲的快捷鍵：

左Alt + 左Shift + Printscreen

<img> Sprite 實例

下面是2個案例，一個是CSS Sprite技術(shù)，一個是<img> Sprite技術(shù)的，2種模式下都Look Look，做一個“找不同”的小游戲。

CSS Sprite demo

<img> Sprite demo

已知的應用限制

這項技術(shù)應用的前提是圖片要放置在塊元素或者設置了“display: block”屬性的內(nèi)聯(lián)元素中。<img>在下列元素中時不起作用：

測試所用的瀏覽器版本是IE6+，F(xiàn)irefox 3.5+，Chrome和Safari 4+，并且估計在所有現(xiàn)代瀏覽器下都沒問題。

高對比度模式檢測

Chris Blouch 還在AXS的無障礙JS庫中創(chuàng)建了一個高對比度模式檢測的模塊，如果你的網(wǎng)站目前已經(jīng)遇到了這方面的問題并且想改進它，可以在下面的地址獲取這個庫更多的信息：

http://dev.aol.com/downloads/axs1.2/readme.html#hd

更牛叉的：它能支持打印設備

很多人都在抱怨使用背景圖技術(shù)的CSS雪碧對打印設備支持的糟爛，而這里的《img》雪碧技術(shù)就沒這個問題。

CSS Sprite技術(shù)打印出來的：

<img> Sprite技術(shù)打印出來的：

（原文：artzstudio.com 譯文來源：堂主轉(zhuǎn)載請尊重原作者及譯者勞動成果，謝謝合作）

總結(jié)：以前看到過IMG Sprite技術(shù)的相關(guān)文章，今看掏寶網(wǎng)部分地方也用到這項技術(shù)，我覺得不論是背景還是IMG sprite，偏向哪種都不行，綜合兩者結(jié)合運用才是王道。對重要的功能模塊用IMG sprite技術(shù)還是不錯滴！具體去看掏寶首頁吧！呵呵。