具有亲和力的文字隐藏方法

一个新的,更加具有亲和力的CSS隐藏文字方法介绍,来自sonspring.com,说明为什么现有的几种CSS隐藏文字的方法的缺陷和新的方法如何弥补。实用性一般,但是这个方法挺新颖的。

1.display:none;的缺陷

  • 搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略,来自SEO Mistakes: Unwise comments
  • 屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。

2. visibility: hidden ;的缺陷
这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间

3.overflow:hidden;一个比较合理的方法

.texthidden 
{
?display:block;/*统一转化为块级元素*/
?overflow: hidden; 
?width: 0; 
?height: 0; 
}

就像上面的一段CSS所展示的方法,将宽度和高度设定为0,然后超过部分隐藏,就会弥补上述一、二方法中的缺陷,也达到了隐藏内容的目的。

延伸阅读:
Google, SEO and using CSS to hide text

术语:
可访问性(Accessibility)
是使残疾人更容易地使用应用程序的惯例。
1990 年的美国残疾人法案(The American Disabilities Act)
1996 年的电信法案(The Telecommunications Act)
1998 年的康复法案修正案(Rehabilitation Act Amendments)508 条款
万维网联盟(W3C)的 Web 可访问性倡议(Web Accessibility Initiative(WAI))
这些都是可访问性标准。在 Law and disabilities页面上可获得更多信息。

屏幕阅读器(Screen Reader)
是为视觉上有障碍的人设计的读取屏幕内容的程序。

可用性(Usability)
使每个人都更容易地使用应用程序的惯例。可访问性是可用性中的一类。

Web 浏览器(Web Browser)
可以显示 Web 页面的任何程序。大多数 Web 浏览器可以显示 HTML 页面,但有些(诸如移动电话中的浏览器)可能只显示诸如 WML 或 cHTML 那样的其它类型的页面。

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 具有亲和力的文字隐藏方法

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏