堂主 - WEB前端开发

专注于互联网 | WEB前端开发 | 以用户为中心的体验 | 家是圆心 | Code is art !

博文列表

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

0 comments

原文地址:http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

堂主译文地址:http://www.osmn00.com/translation/222.html

转载请尊重原作者及译者劳动,附带以上信息,谢谢合作~

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

-------------------- 分割线,以下是正文 --------------------

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

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

 在Google Video中,前后选项的按钮消失了:

Modernizr——为HTML5和CSS3而生!

2 comments

原文地址:http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/

堂主译文地址:http://www.osmn00.com/translation/221.html

转载请尊重原作者及译者劳动,附带以上信息,谢谢合作~

-------------------- 分割线,以下是正文 --------------------

ALA308_modernizr_final.jpg

10年前,只有最尖端的网站设计师会为网页的布局和修饰使用CSS。那时的浏览器对CSS进行布局的支持即不完善又漏洞百出,所以这些人在坚持WEB标准化的同时,也不得不采用hacks来使得他们的页面在所有浏览器中都能正常显示。其中一个被使用的越来越多的hack技术是浏览器嗅探(browser sniffing),使用Javascript里的navigator.userAgent属性来判断用户使用的是什么品牌哪个版本的浏览器。浏览器嗅探技术可以快捷的将代码进行分支,以便针对不同的浏览器应用不同的指令。

今天,以CSS为基础进行的布局已经非常普遍,浏览器们对它的支持也非常的坚实。但是现在CSS3和HTML5来了,历史转了个圈又回到了原地——各个浏览器对这些新技术的支持又开始变得参差不齐了。我们早都习惯了书写整洁的符合标准的代码,也不会再使用CSS hacks或者浏览器嗅探这些不靠谱又低级的技术。我们也相信越来越多的用户会认同网站不必在所有浏览器里都看起来一样的理念。那面对当下这个熟悉的情形(浏览器支持的不同),我们该怎么做呢?简单:使用特征检测(feature detection),这意味着我们不必通过问浏览器“你是谁?”来做出不靠谱的推测。取而代之,我们问浏览器“你能做这个或那个吗”。这么来检测浏览器的能力是很简便的,但一个个的花时间去手工测试依然令人厌烦。此时Modernizr可以帮助我们。