对于CSS隐藏文字也许大家并不陌生,第一想到的或许就是 text-indent:-999em。但是作为一个重构者,精益求精一直是我们追求的目标,抛开text-indent的适用场景和bug不谈,大家有没有想过这种方法的弊端呢?
显而易见,如果图片由于某些原因未加载的时候,设置了 text-indent:-999em导致文字移出了浏览器视口(可视区域),我们看到的会是一片空白。网页中最重要的是内容,显然此时的可用性大打折扣了。
那么下面就先给大家说说可用性
Web内容无障碍指南(WCAG 2.0)定义了web内容无障碍的四项基本原则:可感知、可操作、可理解和健壮性,借用下jace幻灯片的图:
根据以上原则,我们就可以更好的来阐述 隐藏文字的利弊了,分为以下四种情况:
文字隐藏 |
分类 |
作用 |
方法 |
1.完全隐藏 |
用户交互 |
display:none; |
|
2.对屏幕阅读器隐藏 |
减少干扰 |
tabindex=“-1” |
|
3.对机器不隐藏 |
屏幕阅读器,搜索引擎等机器可以识别 |
text-indent:-999em; line-height 较大值 ... |
|
4.图片未加载不隐藏 |
图片未加载时文字可以显示 |
这个是本文的重点 |
很多时候,由于视觉的要求,很多标题性的文字,我们也还是得去使用图片,比如这次改版的一淘首页:
所以可用性更好的CSS隐藏文字应该具备一下几点:
1)支持双向(bidi-directional )字符集语言;
即同时支持从左到右和从右到左(例如:阿拉伯语、希伯来语)方向的文字。
2)可感知:图片未加载的时候,文字可以正常显示,而不是空白;
在高对比度模式下,所有背景图片都会被隐藏掉,我们来看看一淘的一个频道页:http://price.etao.com/search.htm?cat=50080000&sort=cm
高对比度模式下会变成这样:
去比较 按钮完全不见了,只能盲人摸象。很多朋友可能不知道高对比度模式是作何用途的,他是微软为色弱群体提供的一种系统主题,使色弱用户能更好的识别页面内容。再次提醒大家页面内容才是主体,不要本末倒置了。对于这种按钮,更好的方法是不把文字写入背景,可用性和可维护性都会更好!(色弱属于色觉障碍,分色盲和色弱两类,色弱为辨色力不足。色盲包括红色盲、绿色盲及蓝色盲、全色盲。后两种少见,色弱也包括红、绿、蓝色弱)
3)可感知:屏幕阅读器,搜索引擎都可以正常识别文字;
这对于视觉障碍用户和SEO都是很有帮助的;
4)健壮:用最少的Html结构去实现,减少对空标签的依赖性,容易抽象为独立模块。
需要隐藏文字的图片通常作用是装饰性的,像网站的logo更适合使用img标签插入。
好了,下面我们来看看实现CSS隐藏文字的各种方法,同时给出对应的优缺点
1、暴力的 display:none
<div class="hd">
<h2 class="tit fl"><span class="ir">CSS层叠之美</span></h2>
<a href="http://www.iyunlu.com/view" class="more" title="CSS层叠之美">更多 ></a>
</div>
.mod1 .ir { display: none; }
屏幕阅读器 |
图片未加载显示文字 |
高对比度模式显示文字 |
透明图片 |
设置背景色 |
是否需要定义宽高 |
是否支持Sprite |
兼容性 |
NO |
NO |
NO |
YES |
YES |
NO |
YES |
NO |
点评:大量使用容易被搜索引擎认为作弊,而且文字是彻底隐藏。
2、万能的margin负值
<div class="hd">
<a class="tit ir" href="http://www.iyunlu.com/view" title="注意bug">云路科技云路科技云路科技云路科技</a>
</div>
.mod2 .ir {
margin-left: -999em;
}
屏幕阅读器 |
图片未加载显示文字 |
高对比度模式显示文字 |
透明图片 |
设置背景色 |
是否需要定义宽高 |
是否支持Sprite |
兼容性 |
YES |
NO |
NO |
YES |
YES |
NO |
YES |
NO |
点评:容易对布局造成影响,不适合模块化
扩展阅读:
margin负值 – 一个秘密武器
3、text-indent 负值
<div class="hd">
<a class="tit ir" href="http://www.iyunlu.com/view" title="注意bug">CSS层叠之美</a>
</div>
.mod3 .ir{
text-indent:-999em;
overflow:hidden;
display:block;
}
屏幕阅读器 |
图片未加载显示文字 |
高对比度模式显示文字 |
透明图片 |
设置背景色 |
是否需要定义宽高 |
是否支持Sprite |
兼容性 |
YES |
NO |
NO |
YES |
YES |
NO |
YES |
IE问题多多 |
点评:firefox下会导致焦点框扩大,需要添加overflow:hidden,同时text-indent尽量用于block元素,否则问题多多。
详见:《text-indent小总结》http://ued.ctrip.com/blog/?p=2942
IE6/IE7下,使用负缩进的方法隐藏inline-block元素内的文本,该元素也会缩进相同的值。
text-indent方法不适用于从右到左方向的语言。
4、新颖的 font:0/0 a;
<div class="hd">
<h2 class="tit fl"><span class="ir">CSS层叠之美</span></h2>
<a href="http://www.iyunlu.com/view" class="more" title="CSS层叠之美">更多 ></a>
</div>
.mod4 .ir {
border: 0 none;
font: 0/0 a;
/* display:block;
margin-top:-1px; 修复 IE6 隐藏不完全 */
text-shadow: none;
color: transparent;
background-color: transparent;
}
.mod4 .ir br { display: none; }
屏幕阅读器 |
图片未加载显示文字 |
高对比度模式显示文字 |
透明图片 |
设置背景色 |
是否需要定义宽高 |
是否支持Sprite |
兼容性 |
YES |
NO |
NO |
YES |
YES |
NO |
YES |
IE6出现小点 |
点评:这个方法是html5-boilerplate 中使用的,效果不错,唯独IE6会显示一个小点,可以通过其他方法兼容IE6。
5、牛掰的 CSS clip 属性裁剪
<div class="hd">
<h2 class="tit fl"><a class="ir-warp" href="http://www.iyunlu.com" title="CSS层叠之美"><span class="visually-hidden">CSS层叠之美</span></a></h2>
</div>
.visually-hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 none!important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
屏幕阅读器 |
图片未加载显示文字 |
高对比度模式显示文字 |
透明图片 |
设置背景色 |
是否需要定义宽高 |
是否支持Sprite |
兼容性 |
YES |
NO |
NO |
YES |
YES |
NO |
YES |
NO |
点评:用好clip,事倍功半,只是hack比较多,CSS代码比较多。由Jonathan Snook 最先提出的,详见 Hiding Content for Accessibility。
6、空标绝对定位遮盖法
<h2 class="tit ir-warp fl"><b class="ir"></b><a href="http://www.iyunlu.com" title="CSS层叠之美">CSS层叠之美</a></h2>
.mod6 .ir-warp {
position: relative;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
}
.mod6 .ir {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: url(http://www.iyunlu.com/skin/tg/images/logo.png) no-repeat 0 0;
}
屏幕阅读器 |
图片未加载显示文字 |
高对比度模式显示文字 |
透明图片 |
设置背景色 |
是否需要定义宽高 |
是否支持Sprite |
兼容性 |
YES |
YES |
YES |
NO |
NO |
YES |
YES |
NO |
点评:添加了无语义的空标签,图片未加载和高对比度模式下可以显示文字,由于不可以设置背景颜色 ,透明图片无法完整遮挡住文字,除非使文字面积不超过图片不透明部分。
7、可操作欠佳的 position: absolute
<h2 class="tit ir-warp fl"><span class="ir">CSS层叠之美</span></h2>
.mod7 .ir-warp { position: relative; }
.mod7 .ir {
position: absolute;
top: -999em;
left: -999em;
overflow:hidden;
}
屏幕阅读器 |
图片未加载显示文字 |
高对比度模式显示文字 |
透明图片 |
设置背景色 |
是否需要定义宽高 |
是否支持Sprite |
兼容性 |
YES |
NO |
NO |
YES |
YES |
NO |
YES |
页面跳动 |
点评:可聚焦元素获得焦点时,页面会出现*的滚动现象。
8、又见 overflow:hidden
<h2 class="tit"><span class="ir">CSS层叠之美</span></h2>
.mod8 .ir {
display: block;
line-height: 0;
overflow: hidden;
}
屏幕阅读器 |
图片未加载显示文字 |
高对比度模式显示文字 |
透明图片 |
设置背景色 |
是否需要定义宽高 |
是否支持Sprite |
兼容性 |
YES |
NO |
NO |
YES |
YES |
NO |
YES |
NO |
点评:Apple的 voice Over 无法读出高度为0元素中的文字
9、高度三倍以上的line-height
<h2 class="tit"><span class="ir">云路科技-CSS层叠之美</span></h2>
.mod9 .ir {
display: block;
overflow: hidden;
height: 60px;
line-height: 180px;
}
屏幕阅读器 |
图片未加载显示文字 |
高对比度模式显示文字 |
透明图片 |
设置背景色 |
是否需要定义宽高 |
是否支持Sprite |
兼容性 |
YES |
NO |
NO |
YES |
YES |
NO |
YES |
NO |
点评:
10、另辟蹊径 content :url 插入图片(绝对定位方式)
<div class="hd ir-warp">
<h2 class="tit ir">CSS层叠之美</h2>
</div>
.mod10 .ir-warp {
position: relative;
overflow: hidden;
}
.mod10 .ir:before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: url("http://www.iyunlu.com/skin/tg/images/logo.png");
}
屏幕阅读器 |
图片未加载显示文字 |
高对比度模式显示文字 |
透明图片 |
设置背景色 |
是否需要定义宽高 |
是否支持Sprite |
兼容性 |
YES |
YES |
NO |
NO |
YES |
YES |
YES |
IE6、7不支持 |
点评:原理与方法6类似,使用更加符合语义的content插入装饰性图片,可维护性更好,很可惜IE6、7不支持:before伪元素。
11、content background 插入图片
<div class="hd ir-warp">
<h2 class="tit ir">CSS层叠之美</h2>
</div>
.mod11 .ir-warp { overflow: hidden; }
.mod11 .ir:before {
content: "\200b";
background: url(http://www.iyunlu.com/skin/tg/images/logo.png) no-repeat 0 0;
display: block;
height: 100%;
}
屏幕阅读器 |
图片未加载显示文字 |
高对比度模式显示文字 |
透明图片 |
设置背景色 |
是否需要定义宽高 |
是否支持Sprite |
兼容性 |
YES |
NO |
NO |
YES |
YES |
定高 |
YES |
IE6、7不支持 |
点评:由于高度固定了,当图片未显示的时候依然占据空间,文字溢出被隐藏了所以还是无法显示出来。
12、精益求精content url+display:inline-block
<div class="hd ir-warp">
<h2 class="tit ir">CSS层叠之美</h2>
</div>
.mod12 .ir-warp { overflow: hidden; }
.mod12 .ir:before {
content: url("http://www.iyunlu.com/skin/tg/images/logo.png");
display: inline-block;/* 配合 margin 作 spire 定位 */
}
屏幕阅读器 |
图片未加载显示文字 |
高对比度模式显示文字 |
透明图片 |
设置背景色 |
是否需要定义宽高 |
是否支持Sprite |
兼容性 |
YES |
YES |
NO |
YES |
YES |
NO |
YES |
IE6、7不支持 |
点评:强强联合,此方法可谓精益求精,图片未加载也能正确显示文字,同时还支持透明图片和设置背景颜色
13、使用相对定位遮盖
<h2 class="tit fl"> <a class="ir-warp" href="http://www.iyunlu.com" title="CSS层叠之美"> <span class="ir">CSS层叠之美</span> </a> </h2>
.mod13 .ir-warp {
display: block;
height: 100%;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
}
.mod13 .ir {
position: relative;
z-index: -1;
zoom: 1;
overflow: hidden;
}
屏幕阅读器 |
图片未加载显示文字 |
高对比度模式显示文字 |
透明图片 |
设置背景色 |
是否需要定义宽高 |
是否支持Sprite |
兼容性 |
YES |
YES |
YES |
NO |
NO |
YES |
YES |
IE6、7层级bug |
点评:比方法6更简单,没有无语义的空标签。如果外层标签存在绝对定位,注意IE6、7可能会出现层级bug,导致文字无法遮盖,Oh my god,西天如来、观世音菩萨、玉皇大帝赶紧收了IE6这个妖孽吧!
综上所述
方法12,13是我们的不二之选,两者互相补充,根据使用场景不同,大家可以选择最适合的方案,当然IE6、7这两朵奇葩需要我们特别对待。我们来看看两者合体后的情况:
正常情况
图片未加载
所有浏览器完美显示出文字,Safari,Opera,Chrome对于conten插入的图片加载失败时 均显示提示图标或者 “图像”文字,这个浏览器处理不同就不过多说明了。看看合体后的支持情况:
屏幕阅读器 |
图片未加载显示文字 |
高对比度模式显示文字 |
透明图片 |
设置背景色 |
是否需要定义宽高 |
是否支持Sprite |
兼容性 |
YES |
YES |
IE6,7显示 |
YES |
YES |
YES |
YES |
NO |
展望未来
content 生成内容特别适合做一些装饰性的布局,因为content就是为此而生的,很多小图标的定位我们完全可以抛弃空标签了,还有强大的 CSS3 content:attr() 我们拭目以待。
content在闭合浮动(清除浮动)上也大显身手,有兴趣可以看看我的另外一篇文章:
那些年我们一起清除过的浮动
关于content 的更多应用请看:CSS content内容生成技术以及应用
通过各种方法的优缺点互补,我们很容易获得最适合的方案,在做好兼容性布局后,应该往可用性等更深层次进取,不断尝试探索新的方法。最后送大家一句话:
做简单可依赖的人,写简单可依赖的CSS
CSS层叠之美,你发现了吗?
由于精力有限,本文难免存在错误与疏漏,还请不吝口水,欢迎补充和修正本文存在的不足,非常感谢!
参考文献:
Nine Techniques for CSS Image Replacement http://css-tricks.com/css-image-replacement/
Nouvelle méthode de remplacement de texte par une image http://css.4design.tl/nouvelle-methode-de-remplacement-de-texte-par-une-image
Another CSS image replacement technique http://nicolasgallagher.com/another-css-image-replacement-technique/
视觉隐藏内容 http://www.topcss.org/?p=418