一提到 CSS 的 display:none,大家应该都很熟悉,如果需要将某 HTML 元素隐藏不显示的话,很多人都会使用它。也许你会问,这个还有必要再讲吗?且听我慢慢讲来。
现如今,很多网站都会使用 Tab, Slide 动画等这些常见的手段让用户能有好的使用体验,而且有时为了页面的简洁,我们也经常会用到 display:none 来达到隐藏元素的目的,再者很多鼎鼎大名的 JavaScript 库也会使用它,例如 jQuery。
既然大家都用 display:none,那么还有什么好谈的呢?
当然,合理合法的使用 display:none 对用户及 SEO 而言是正常的,搜索引擎也会去理会。可是如果非法的使用它们,借此想提高 SEO 的效果,就是非法的,而且搜索引擎也会对其进行惩罚。请看下面的例子:
<script language="JavaScript" type="text/javascript">
var o='d'+'i'+'v';
var a='style=\'disp';
var b='lay:';
var c='none\'';
document.write( "<"+o+a+b+c+">" );
</script>
类似这样的写法,大家可能也见过,有的连<script>标签也进行拆分连接,例如: "<scr" + "ipt>",这样做的目的只有一个,就是“欺骗”:希望通过在页面上插入关键字或链接来提高 SEO 效果但是又不想让用户看到。无论是 SEO “欺骗”也好,还是出于其它目的进行“欺骗”也好,俗话说,出来混迟早是要还的。对于 SEO 而言,搜索引擎现在已经足够智能,对于上面这样简单的“欺骗”会进行严厉的处罚,所以任何侥幸的心理请不要有,因为随着算法的改进,各种黑帽(SEO 欺骗技术)早晚都会被发现的,而且一定会被重罚的。
刚才提到的是 display:none 对 SEO 的影响,还有一个影响可能是很多人都不知道的,那就是对“屏幕阅读器(screen reader)”的影响。
使用 iOS 设备的人现在是越来越多了,不知道其中的“VoiceOver”功能你是否知道,是否了解,是否使用过。出于人性化的考虑,很多移动设备包括 PC 几乎都有“辅助功能”,帮助身体不便的人来使用,其中“屏幕阅读器(screen reader)”就是帮助视力有障碍的人来读出屏幕上的内容的。
如果一个网页中的内容使用了 display:none,那就意味着,你同时拒绝了为用户显示及“屏幕阅读器(screen reader)”。然而这样的结果可能是你不想得到的,那么我们该怎么办呢?怎么才能既不显示在页面上,又对“屏幕阅读器(screen reader)”有效呢?请看如下的代码:
.visuallyhidden {
position: absolute;
width: 1px; /* Setting this to 0 make it invisible for VoiceOver */
height: 1px; /* Setting this to 0 make it invisible for VoiceOver */
padding: 0;
margin: -1px;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
上面这段代码出自 HTML5BoilerPlate project(参见下文引用地址),你可以管它叫“可见的隐藏”,虽然用户看不到内容,但是“屏幕阅读器(screen reader)”却可以看见它。
你可能又会问了,“如果我使用了类似于 jQuery 这样的库怎么办?比如说,jQuery 的 slide 动画会动态的在元素上生成 display:none,那些的话,你说的这个办法不就不管用了吗?”
解决的办法当然是有的,请如下面的示例:
var $button = $('#myButton'),
$text = $('#myText'),
visible = true;
$button.click(function(){
if ( visible ) {
$text.slideUp('fast',function(){
$text.addClass('hide')
.slideDown(0);
});
} else {
$text.slideUp(0,function(){
$text.removeClass('hide')
.slideDown('fast');
});
}
visible = ! visible;
});
示例地址:
http://jsfiddle.net/chriscoyier/zgtfA/1/
示例讲解:当 visible 为真时,此时元素的状态是可见的,首先执行动画 slideUp 将元素隐藏(此时元素上有 display:none),动画结束时,添加“可见的隐藏” CSS,让元素不可见,然后再立刻执行 slideDown 动画,持续时间为 0(即无动画过程),此时就移除了元素上的 display:none,而且元素依然是不可见的(因为有“可见的隐藏” CSS)。
当 visible 为假时,此时元素的状态是不可见的,首先执行 slideUp 动画将元素隐藏(此时元素上有 display:none),持续时间为 0(即无动画过程),动画结束后,移除“可见的隐藏” CSS,此时元素依然是隐藏的,因为有 display:none,之后再执行 slideDown 动画,显示元素内容。
总结:综上所述,若不考虑“屏幕阅读器(screen reader)”,合理合法的使用 display:none 是隐藏元素最简单的做法,而且还不用担心会被搜索引擎惩罚(因为不是黑帽),不会影响 SEO 效果。若你的网站支持移动设置访问,那么最好考虑到用户很可能是使用“屏幕阅读器(screen reader)”,因此你可以采用“可见的隐藏”方法来隐藏元素。
引用
分享到:
相关推荐
web页面前台编码时经常用到display:none样式,平常使用时发现有几点特征需要注意
前言: 在使用css隐藏栏位或物件的时候, 常常会使用到display:none和visibility:hidden这两个属性, 但却很容易分不清楚这两个的差别, 或是乾脆同时使用两种属性,来确保物件一定被隐藏, 其实我们可以很简单的来...
对于某一单元行需要显示时,使用CSS display:block属性,不需要显示时使用display:none属性,在IE浏览器中显示正常,没有任何问题,但是当用Firefox浏览时却出现了布局错乱的问题,这是为什么呢? 本文向大家介绍...
主要给大家介绍了CSS中的display:flex和display:inline-flex属性,文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果,感兴趣的朋友们可以参考借鉴,下面来一起看看吧。
本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有span,a,em,strong等。而float表示的是浮动,float:...
对所有的块元素都没有意义,块元素的dispaly属性默认值为block,没必要再显式定义——除非你之前对块元素的display属性重新定义过。 display:block;比较常用于<a><span>这两个标签——因为这两个标签非块元素,...
项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格的合并,即采用正行嵌套一个单独的...
在CSS中,让元素隐藏指屏幕范围内肉眼不可见的方法很多,只不过有的依然保留空间,而有的却消失的不留痕迹,接下来本文将详细介绍下css元素隐藏原理,感兴趣的你可不要错过了哈
本文向大家描述一下CSS属性display:inline-block的用法,在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性;可以将对象呈递为内联对象,但是对象的内容作为块对象呈递,旁边的内联对象会被呈递在...
CSS 样式应用优先级详解 CSS 样式应用优先级是指在CSS样式规则应用时的顺序和优先级。该优先级规则决定了哪些样式规则将被应用于HTML元素。下面是CSS样式应用优先级的详细解释: 1. 重要声明(!important) 重要...
HTML+css PPT浅谈.rar
目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cell属性在实际项目中的应用。 我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐...
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio:...
display: flex弹性布局
主要介绍了css display:box 新属性的相关资料,需要的朋友可以参考下
CSS隐藏元素 display visibility opacity的区别 display:none和visibility:hidden的区别 对比总结: height:0和overflow:hidden的组合