display none 隐藏后怎么显示_你用对了隐藏的方法了吗

在 Web 开发中出于多种原因,我们需要隐藏元素。例如,一个按钮应该在移动中可见,而在桌面视口中隐藏。或者,在移动设备上隐藏但要在桌面上显示的导航元素。隐藏元素时有三种不同的状态:

  • 元素完全隐藏并从文档流中删除。
  • 元素只是隐藏在视觉上,而且仍然可以被辅助技术(AT)访问,比如屏幕阅读器。
  • 元素是可见的,但仅对屏幕阅读器隐藏。

在这篇文章中,我们将学习在htmlcss中隐藏元素,并涵盖易访问性、动画和隐藏用例等方面,让我们开始吧。

HTML5 隐藏属性

它是一个布尔 HTML 属性,隐藏了附加到它的元素。当浏览器加载一个web页面时,它不会渲染带有hidden属性的元素,除非该元素被CSS手动覆盖,这与应用display: none的效果类似。

考虑下面的例子:

db4adf6f9c1f6fee14ac01161c0c085a.png

我们有一个title、一个figure和一个描述。只有当视口宽度大于400px时,才会显示该图。我向元素添加了hidden`属性。

在CSS中,我使用hidden属性仅在所需的视口大小中显示元素。

3d1f36c36a15a0741fdf85bb53336725.png

img[hidden] {
display: none;
}

@media (min-width: 400px) {
img[hidden] {
display: block;
}
}

事例源码:https://codepen.io/shadeed/pen/373c8a132e5d72201b935689d6990d16?editors=1100

那么,你可能会问为什么不使用display: none呢?这是个好问题。当通过其hidden属性调用图像选择器时,我们可以确定即使CSS因为某种原因没有加载,元素也会被隐藏。

可访问性对hidden的影响

从可访问性的角度来看,hidden将元素完全隐藏在web页面之外,因此屏幕阅读器无法访问它。一定要避免使用它来隐藏仅用于表示目的的元素。

CSS display 属性

每个元素都有一个默认的display值,比如inline-blockblocktable等等。要隐藏具有display属性的元素,我们应该使用display: none。当一个元素使用display: none隐藏时,它的所有后代都将被删除。

考虑下面的例子:

img {
display: none;
}

@media (min-width: 400px) {
img {
display: block;
}
}

这将完全隐藏文档流和屏幕阅读器中的图像。也许你想知道文档流是什么?请参见下图:

b0f3ed6b7763a6b4bfd642a7df21c5f1.png

注意,当蓝皮书被隐藏时,它已被完全从堆栈中删除。为它保留的空间已经消失了。同样的概念也适用于在HTML中隐藏元素时。元素的预留空间已经没有了,它更改了文档流,或者在我们的示例中,更改了图书流堆栈。

下面是一个动画,演示当移除书本时发生的情况:

809a29a0569b9536c3e04d96442a1328.gif

如果资源隐藏在CSS中,它们会加载吗?

是的,会的。例如,如果被CSS隐藏,并且我们在某个断点处显示它,则它已经被加载。即使图片被CSS隐藏,该图片也会引起HTTP请求。

在下面的演示中,我只添加了一个图像,并使用CSS隐藏它。然后,我打开「DevTools」并检查networks选项卡,它显示图像已加载。

d094fec2c924edec0bf1dbd5711d3be7.gif

稍后我们将对此进行讨论,以解释如何在特定断点或视口大小中不需要HTTP请求时减少HTTP请求。

style 元素

值得一提的是,有些元素的默认值是display: none。可以将元素添加到HTML页面中,我们可以将其display属性更改为block,这样就可以看到它了。

「html」




「css」

style {
display: block;
}

如果您希望样式块始终可见且可编辑,这是非常有用的。可以通过向style标签添加属性contentteditable =true来编辑它。

5383120090006c41f7bc4195c374ab07.gif

事例:https://codepen.io/shadeed/pen/3c1e8d7d69bcf03aa875e3e50d0ffe02?editors=1100

可访问性对display: none的影响

使用display:none时,它将对屏幕阅读器完全隐藏。

Opacity

通过将opacity度设置为0,该元素及其所有后代将被隐藏,并且不会被继承, 但是,它仅从视觉角度隐藏它们。除此之外,opacity值为1以外的元素将创建一个新的堆叠上下文。

5d74c1276ba317035a82cffe9801d0da.png

在上图中,蓝皮书仅在视觉上隐藏。与使用display: none时发生的情况相比,它的空间仍然保留,并且堆栈顺序没有变化。

img {
opacity: 0;
}

根据最初的示例,如果我们要隐藏不透明的图像,结果将如下所示:

d87eb6d15bc154c6618d533fbd0ec69c.png

该图像仍然存在,并且已保留其空间。它仅从视觉角度隐藏。

更新:2020年1月13日

Dusan Milovanovic指出,pointer-events: none | auto可以用来禁用opacity0的隐藏元素上的鼠标事件。这一点很重要,因为用户可能会对单击、悬停或选择隐藏元素的文本感到困惑。

事例:https://codepen.io/shadeed/pen/4900ddd4a4d324cc531c1980088f775a?editors=1100

可访问性对opacity: 0的影响

一个元素以opacity: 0仍然可以被屏幕阅读器访问,并且可以用键盘进行聚焦。

Visibility

通过使用visibility: hidden,我们可以显示或隐藏类似于使用opacity: 0的元素,而不会影响文档的视觉流。

31e2cb85b699bd930824d63ed7f2afd6.png

请注意,蓝皮书是如何从可视流中隐藏的,但是它并没有影响图书堆栈的顺序。

当在父元素上使用visibility: hidden时,所有内容都是隐藏的,但是当该父元素的子元素具有visibility: visible时,将显示该子元素。

f5166265d8b85162ad000f7109aef2b5.png

「html」

Spring is on the way


「CSS」

article {
visibility: hidden;
}

img {
visibility: visible;
}

22524056900f7a9f62d474dd471f511a.gif

在上面的例子中,元素具有visibility: hidden。但是,添加visibility: visible可以让图片显示。同样,这是因为visibility应用于元素的后代,但是可以从具有该元素的子元素重写它。

事例源码:https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100

可访问性对visibility: hidden的影响

该元素被隐藏,其后代将从可访问性树中删除,并且屏幕阅读器不会渲染该元素。

Positioning

要隐藏带有position属性的元素,我们应该将它移到屏幕外,并将其大小设置为0(宽度和高度)。个例子就是跳转导航链接。考虑下面的图:

f0ed64510272d01b2ee6636aeb8a32a3.png

要将链接放置在屏幕之外,我们应该添加以下内容

「css」

.skip-link {
position: absolute;
top: -100%;
}

-100%将推动元素100%的视口高度。结果,它将被完全隐藏。一旦它聚焦在键盘上,它就会像这样显示出来

.skip-link:focus {
position: absolute;
top: 0;
}

事例源码:https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100

可访问性对position: absolute | fixed的影响

屏幕阅读器可访问该元素,并且键盘可聚焦。它只是从视口中隐藏起来。

Clip Path

当在元素上使用clip-path时,它创建一个裁剪区域,该区域定义应该显示和隐藏哪些部分。

cc70d8229345f0a337919fa8f75fb9d3.png

在上面的例子中,透明的黑色区域有clip-path。当clip-path应用于元素时,透明黑色区域下的任何内容都不会显示。

为了更直观地演示以上内容,我将使用clippy工具。在下面的GIF中,我有如下的clip-path:

682115b39984a7df9c3cdadc02e908e5.gif

将每个方向的多边形值设置为0 0,则裁剪区域的大小将调整为0。结果,图像将不会显示。同样,这也可以用一个圆来代替多边形:

img {
clip-path: circle(0 at 50% 50%);
}

5b06c147b330d47eee37ff2296424f5a.gif

可访问性对clip-path的影响

元素仅在视觉上隐藏, 屏幕阅读器和键盘焦点仍然可以使用它。

事例源码:https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100

控制颜色和字体大小

虽然这两种技术不像我们前面讨论的那样常见,但它们可能对某些用例有用。

颜色透明

通过使文本的颜色透明,它将隐藏在视觉上。这对于只有图标的按钮非常有用。

字体大小

此外,将字体大小设置为0也很有用,因为这会在视觉上隐藏文本。考虑下面的示例,其中有一个具有以下结构的按钮:

Like

我们的目标是以可访问的方式隐藏文本。为此,我添加了以下CSS

.button span {
color: transparent;
font-size: 0;
}

这样,文本就被隐藏了。它甚至可以在不更改颜色的情况下工作,但是我出于解释目的添加了它。

a69d377b30dc4baed7980721623b7f67.png

事例源码:https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100

Aria Hidden

当向元素添加aria-hidden属性时,它将从可访问性树中删除该元素,这可以增强屏幕阅读器用户的体验。注意,它并没有在视觉上隐藏元素,它只针对屏幕阅读器用户。


Menu

在上面的例子中,我们有一个带有标签和图标的菜单按钮。为了向屏幕阅读器隐藏图标,添加了aria-hidden

根据Mozilla Developer Network (MDN),下面是属性的用例

  • 隐藏装饰性的内容,如图标、图像。
  • 隐藏复制文本。
  • 隐藏屏幕外或折叠的内容。

可访问性对aria-hidden="true"的影响

是为屏幕阅读器设计的,因为它只对屏幕阅读器隐藏内容。然而,内容对于有视力的用户仍然是可见的,并且键盘是可聚焦的。

动画与互动

当我们想让一个隐藏的元素动起来时,例如,显示隐藏的移动导航,它需要以一种可访问的方式来完成。为了获得一种可访问的体验,我们将探索一些值得学习的好例子,以及一些不好的例子,以避免犯可能会给屏幕阅读器用户带来不好体验的错误。

#### 菜单动画-不好的例子

我们有一个菜单,在展开时需要有滑动动画。最简单的方法是在菜单中添加以下内容:

ul {
opacity: 0;
transform: translateX(100%);
transition: 0.3s ease-out;
}

ul.active {
opacity: 1;
transform: translateX(0);
}

有了上述内容,菜单将根据.active类展开和折叠,该类将通过 JavaScript 如下添加:

menuToggle.addEventListener('click', function(e){
e.preventDefault();
navMenu.classList.toggle('active');
});

66419cb4ed14ef81fae002b3b1d0aece.gif

结果可能看起来不错,但它有一个很大的错误。使用opacity: 0不会隐藏可访问性树的导航。即使导航在视觉上是隐藏的,它仍然可以通过键盘聚焦,并且可以被屏幕阅读器访问。必须将其隐藏以避免混淆用户。

下面是来自Chrome开发工具的 accessibility tree 的截图:

a39c969a1d1870b1e4ce00b69fcdf19d.png

简而言之,accessibility tree是屏幕阅读器用户可以访问的所有内容的列表。在我们的例子中,导航列表在那里,而它在视觉上是隐藏的。我们需要解决两个问题:

1.菜单隐藏时避免用键盘聚焦 2.当导航隐藏时,避免通过屏幕阅读器告知导航

下面的屏幕截图显示了Mac OS上的VoiceOver转子是如何看到页面的。导航列表在那里,而它是隐藏的

8205e0fee1477a5732ba7765da4f511e.png

事例源码:https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100

菜单动画-好的例子

为了修正这个错误,我们需要使用visibility: hidden作为导航菜单。这将确保菜单是隐藏的视觉和屏幕阅读器。

「css」

ul {
visibility: hidden;
opacity: 0;
transform: translateX(100%);
transition: 0.3s ease-out;
}

ul.active {
visibility: visible;
opacity: 1;
transform: translateX(0);
}

添加后,菜单将从屏幕阅读器中隐藏。让我们再次测试,看看VoiceOver将显示什么:

fac4aae9a8267f56f4570ed9480ca221.png

事例源码:https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110

自定义复选框

bda9f5fab5bb80771230fd1319fb53c3.png

默认的复选框设计很难自定义,因此,我们需要为复选框创建自定义设计。让我们看看基本的 HTML:

Custom checkbox


要自定义复选框,我们需要以一种可访问的方式隐藏输入。为此,应该使用position和其他属性。有一个常见的CSS类,称为sr-onlyvisual -hidden,它只在视觉上隐藏一个元素,并让键盘和屏幕阅读器用户可以访问它。

.sr-only {
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}

事例源码:https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100

### 隐藏按钮

10e8ea7e3bef0c80eca3c870daaa02ec.png

在Twitter上,有一个名为“查看新推文”(See New Tweets)的按钮,对于带有aria-hidden内容的屏幕阅读器来说是隐藏的,只有在有新推文可用时才会显示出来。


作者:Ahmad shaded 译者:前端小智 来源:sitepoint

原文:https://www.sitepoint.com/hide-elements-in-css/

d0ce8b63e2db82b7396e8e47b9af6fb1.png

 其他推荐

玩游戏也可以提成编程能力?你试过吗?

新的Facebook.com重建都使用了哪些黑科技?

如何写出被Team Leader喜欢的JS 代码

前端面试128问汇总(含超详细答案)

你不一定知道的CSS 中的auto

可以任意插拔随意组合的业务级前端模块化神器!

超详细webpack构建方式补给!

超详细webpack基础补给!

当你升级到前端的TL时,如何快速打造用于中小团队的前端基建

线上项目出现问题时如何快速调试定位问题?

学习 React Hooks 可能会遇到的五个灵魂问题

你确定你真的懂CSS吗?

太齐了!前端的学习及工作资料只收藏这份就够了!

大厂都在用的高级缓存方案

我这个页面居然用了10G的GPU?!!

微前端在企业级应用中的实践(华为项目经验传授)

原来微信支付软件架构是这样哒!!!

有这个!你还愁不会写正则吗?

看我如何把node接口耗时降低23%!

高级前端工程师是怎样高效部署前端应用?

【撩妹教程】如何教公司新来的女实习生小姐姐什么是闭包?

前端如何在繁忙的业务中提升自己 全链路日志如何实现? 大厂的高性能小程序原来是这样弄的!测试一下你离前端专家这个称号还有多远?

91226ba34f6beb1e3c88965314034003.png

c34e6cb64dcab21dfe91ec4ea912a79b.png点在看的人特别帅/美 fe4e165069bda06b56b417c1ba807fc2.gif
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值