IMG Sprite：针对高对比度模式的优化技巧

注：高对比度模式是一种Windows系统设置主题，其意是为了保证视力受损用户查看信息的方便。它通过使用对比鲜明的色彩和字体大小提高文本的可读性。高对比度模式下网页的背景默认会变成全黑。

CSS image sprites是一项用来减少网页中图片HTTP请求数的技术，但因其会导致在windows高对比度模式下图片消失的问题，故其导致的web应用性能的 提升和对无障碍体验被破坏之间的矛盾正逐渐引起大家的关注。导致这一问题的原因是这一技术通常是应用CSS的“background-image”这一属 性来创建的。

为了证明这个问题，我们在高对比度模式下浏览一些当下的知名网站（上面的是普通模式，下面的是高对比度模式）：

在Google Video中，前后选项的按钮消失了：

在雅虎法国的网站中，导航项和按钮消失了：

同样在Facebook、亚马逊和AOL音乐中，LOGO也消失了：

同样，流行的内容共享服务的按钮也没了：

Sprite技术的使用的确为更多网站的优化加载速度的体验贡献甚大，但我们要承认，这个过程中我们忽略并损害了使用高对比度模式用户的体验。

<img> Sprites 的介绍

在对应用了新的企业标识文字的图形化标题（图片展示标题）的AOL.com的新的设计中，我决定尝试多年前就想过却一直没使用的东西。

由于<img>元素可以在高对比度模式下显示，那么为什么我们不可以通过裁剪图片的方式来完成我们想要的效果呢？

这个案例中我们的图形化标题的HTML结果是下面这个样子：

我们把alt属性值设置为空以便屏幕阅读器可以越过它们，我们在标题中写了如“Featured”这样的文字以便搜索引擎可以知道这部分是关于什么的（这可比在alt里添加来得实用）。

下面的是我们要设置的CSS：

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

关于测试环境

有2种方法进入高对比度模式

【一】带有强迫症性质的按部就班法：

开始菜单 -- 控制面板

打开辅助功能选项

点击“显示”

勾选“使用高对比度”

确认

【二】懒人万岁的快捷键：

左Alt + 左Shift + Printscreen

<img> Sprite 实例

下面是2个案例，一个是CSS Sprite技术，一个是<img> Sprite技术的，2种模式下都Look Look，做一个“找不同”的小游戏。

CSS Sprite demo

<img> Sprite demo

已知的应用限制

这项技术应用的前提是图片要放置在块元素或者设置了“display: block”属性的内联元素中。<img>在下列元素中时不起作用：

测试所用的浏览器版本是IE6+，Firefox 3.5+，Chrome和Safari 4+，并且估计在所有现代浏览器下都没问题。

高对比度模式检测

Chris Blouch 还在AXS的无障碍JS库中创建了一个高对比度模式检测的模块，如果你的网站目前已经遇到了这方面的问题并且想改进它，可以在下面的地址获取这个库更多的信息：

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

更牛叉的：它能支持打印设备

很多人都在抱怨使用背景图技术的CSS雪碧对打印设备支持的糟烂，而这里的《img》雪碧技术就没这个问题。

CSS Sprite技术打印出来的：

<img> Sprite技术打印出来的：

（原文：artzstudio.com  译文来源：堂主  转载请尊重原作者及译者劳动成果，谢谢合作）

总结：以前看到过IMG Sprite技术的相关文章，今看掏宝网部分地方也用到这项技术，我觉得不论是背景还是IMG sprite，偏向哪种都不行，综合两者结合运用才是王道。对重要的功能模块用IMG sprite技术还是不错滴！具体去看掏宝首页吧！呵呵。