Benjamin - 专注前端开发和用户体验

用 CSS 隐藏页面元素的方式总结

CSS(3) Benjamin 1053℃ 0评论

今天看到篇文章”用 CSS 隐藏页面元素的5种方法“,现加上自己的一点见解及常见应用归纳如下:

一、Display

将display设置为none,可以实现元素隐藏,并且不会生成盒模型。使用这个属性,被隐藏的元素不会占用任何空间。一旦给元素设置display:none,任何对该元素的交互操作都不会生效。此外,读屏软件业不会读到该元素的内容。这种实现方式就好像元素不存在一样。不过我们还是可以使用DOM访问到这个元素并像操作其他元素一样操作它。

对于子孙元素,如果父元素设置display: none,子孙元素会全部隐藏。但使用该元素有个不好的就是会造成reflow,影响layout。

主要应用场景:手风琴、级联导航、状态隐藏等

二、Visibility

使用visibility:hidden,可以实现元素隐藏,但是该元素仍会占用布局空间,但不会响应用户交互,此外该元素在读屏软件中也会隐藏。
这个属性也可以实现动画效果,只要它的初始状态和结束状态不一样。这个确保了visibility不同状态间的过渡是平滑的而不是突然的。
对于子孙元素,它的表单和Display不同,如果给父元素设置visibility:hidden,给某个子元素设置visibility:visible,那么这个子元素仍然可见。

主要应用场景:input[autoclear](隐藏时占用空间而又不影响布局)、清除浮动

三、Position

假设有一个元素你想要与它交互,但是你又不想让它影响你的网页布局,使用position:absolute可以实现我们的需求。在这种情况下,你只需考虑将元素移出可视区域。这个办法既不会影响布局,有能让元素保持可以操作。比如我们常用的CSS:
.hide {
position: absolute;
left: -999em;
top: -999em;
}
这种方式的主要原理就是设置改元素的top/left成足够大的负数,使它在屏幕上不可见。使用该技术,读屏软件可以读取元素内容。
你得避免使用这个方法去隐藏任何可以获得焦点的元素,因为如果那么做,当用户让那个元素获得焦点时,会导致一个不可预料的焦点切换。这个方法在创建自定义复选框和单选按钮时经常被使用。

主要应用场景:模拟input[checkbox]/input[radio]/input[file]

四、Opacity

opacity:0 通过给元素设置透明度来实现元素隐藏,它不是为改吧元素的边界框而设计的。这意味着opacity:0只能从视觉上隐藏元素。而元素本身仍占用布局空间。同时可以响应用户交互,读屏软件可以读取元数及其内容。
使用opacity属性可以用来实现fadeIn/fadeOut动画,任何 opacity 属性值小于 1 的元素也会创建一个新的堆叠上下文(stacking context)。

主要应用场景:fade动画、改变z-index层叠顺序

五、Clip-path

隐藏元素的另一种方法是通过剪裁它们来实现。在以前,这可以通过 clip 属性来实现,但是这个属性被废弃了,换成一个更好的属性叫做 clip-path。Nitish Kumar 最近在 SitePoint 发表了“介绍 clicp-path 属性”这篇文章,通过阅读它可以了解这个属性的更多高级用法。

记住,clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件,浏览器支持度还要更低。使用 clip-path 属性来隐藏元素的代码看起来如下:
.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

被隐藏元素中的文字仍然能够通过读屏软件读取,许多 WordPress 站点使用 clip-path 或者之前的 clip 来实现专门为读屏软件提供的文字。
虽然我们的元素自身不再显示,它也依然占据本该占据的矩形大小,它周围的元素的行为就如同它可见时一样。记住用户交互例如鼠标悬停或者点击在剪裁区域之外也不可能生效。剪裁区大小为零,这意味着用户将不能与隐藏的元素直接交互。此外,这个属性能够使用各种过渡动画来实现不同的效果。

主要应用场景:实现不同形状的shape、常见隐藏动画

六、混合使用场景

.input-file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;  
}

此种方式常用来隐藏input[file]元素。
但是需要注意的是:给input[type=file]设置display: none or visibility: hidden将不会工作,因为表单提交时input的值不会被发送到服务端。同时,你可能会有疑问,这里为什么不把宽高设置为0而为0.1px。设置为0在一些浏览器tab页可能不会被解析。同时设置position:absolute属性来使其脱离标准流,不会影响其他元素的布局。具体参考文章文件上传那些事儿

喜欢 (6)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

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