Web 隐藏技术：几中隐藏 Web 中的元素方法及优缺点

时间  2020-05-15
标签 web 隐藏 技术 元素 方法 优缺点 栏目 HTML 繁體版
原文   原文链接
做者：Ahmad shaded
译者：前端小智
来源：sitepoint
点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。css

在 Web 开发中出于多种缘由，咱们须要隐藏元素。 例如，一个按钮应该在移动中可见，而在桌面视口中隐藏。 或者，在移动设备上隐藏但要在桌面上显示的导航元素。 隐藏元素时有三种不一样的状态：html

  • 元素彻底隐藏并从文档流中删除。
  • 元素只是隐藏在视觉上，并且仍然能够被辅助技术(AT)访问，好比屏幕阅读器。
  • 元素是可见的，但仅对屏幕阅读器隐藏。

在这篇文章中，咱们将学习在html和css中隐藏元素，并涵盖易访问性、动画和隐藏用例等方面，让咱们开始吧。前端

HTML5 隐藏属性

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

考虑下面的例子：github

clipboard.png

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

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

clipboard.png

img[hidden] {
  display: none;
}

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

事例源码：https://codepen.io/shadeed/pe...浏览器

那么，你可能会问为何不使用display: none呢?这是个好问题。当经过其hidden属性调用图像选择器时，咱们能够肯定即便CSS由于某种缘由没有加载，元素也会被隐藏。微信

你们都说简历没项目写，我就帮你们找了一个项目，还附赠【搭建教程】。ide

可访问性对hidden的影响

从可访问性的角度来看，hidden将元素彻底隐藏在web页面以外，所以屏幕阅读器没法访问它。必定要避免使用它来隐藏仅用于表示目的的元素。

CSS display 属性

每一个元素都有一个默认的display值，好比inline-block、block、table等等。要隐藏具备display属性的元素，咱们应该使用display: none。当一个元素使用display: none隐藏时，它的全部后代都将被删除。

考虑下面的例子：

img {
  display: none;
}

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

这将彻底隐藏文档流和屏幕阅读器中的图像。 也许你想知道文档流是什么？ 请参见下图：

clipboard.png

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

下面是一个动画，演示当移除书本时发生的状况：

图片描述

若是资源隐藏在CSS中，它们会加载吗？

是的，会的。 例如，若是<image>被CSS隐藏，而且咱们在某个断点处显示它，则它已经被加载。 即便图片被CSS隐藏，该图片也会引发HTTP请求。

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

图片描述

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

style 元素

值得一提的是，有些元素的默认值是display: none。能够将<style>元素添加到HTML页面中，咱们能够将其display属性更改成block，这样就能够看到它了。

html

<body>
    <style>
       .title { color: #000; }
    </style>
</body>

css

style {
    display: block;
}

若是您但愿样式块始终可见且可编辑，这是很是有用的。能够经过向style 标签添加属性contentteditable =true来编辑它。

图片描述

事例：https://codepen.io/shadeed/pe...

可访问性对display: none的影响

使用display：none时，它将对屏幕阅读器彻底隐藏。

Opacity

经过将opacity度设置为0，该元素及其全部后代将被隐藏，而且不会被继承， 可是，它仅从视觉角度隐藏它们。 除此以外，opacity值为1之外的元素将建立一个新的堆叠上下文。

clipboard.png

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

img {
    opacity: 0;
}

根据最初的示例，若是咱们要隐藏不透明的图像，结果将以下所示：

clipboard.png

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

更新:2020年1月13日

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

事例：https://codepen.io/shadeed/pe...

可访问性对opacity: 0的影响

一个元素以opacity: 0仍然能够被屏幕阅读器访问，而且能够用键盘进行聚焦。

你们都说简历没项目写，我就帮你们找了一个项目，还附赠【搭建教程】。

Visibility

经过使用visibility: hidden，咱们能够显示或隐藏相似于使用opacity: 0的元素，而不会影响文档的视觉流。

clipboard.png

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

当在父元素上使用visibility: hidden时，全部内容都是隐藏的，可是当该父元素的子元素具备visibility: visible时，将显示该子元素。

clipboard.png

html

<article>
  <h1>Spring is on the way</h1>
  <img src="landscape.jpg" alt="">
  <p><!-- Desc --></p>
</article>

CSS

article {
    visibility: hidden;
}

img {
    visibility: visible;
}

图片描述

在上面的例子中，<article>元素具备visibility: hidden。可是，添加visibility: visible可让图片显示。一样，这是由于visibility应用于元素的后代，可是能够从具备该元素的子元素重写它。

事例源码：https://codepen.io/shadeed/pe...

可访问性对visibility: hidden的影响

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

Positioning

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

clipboard.png

要将连接放置在屏幕以外，咱们应该添加如下内容

css

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

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

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

事例源码：https://codepen.io/shadeed/pe...

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

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

Clip Path

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

clipboard.png

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

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

图片描述

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

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

图片描述

你们都说简历没项目写，我就帮你们找了一个项目，还附赠【搭建教程】。

可访问性对clip-path的影响

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

事例源码：https://codepen.io/shadeed/pe...

控制颜色和字体大小

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

颜色透明

经过使文本的颜色透明，它将隐藏在视觉上。这对于只有图标的按钮很是有用。

字体大小

此外，将字体大小设置为0也颇有用，由于这会在视觉上隐藏文本。考虑下面的示例，其中有一个具备如下结构的按钮：

<button>
  <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false">
    <!-- Path data -->
  </svg>
  <span>Like</span>
</button>

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

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

这样，文本就被隐藏了。 它甚至能够在不更改颜色的状况下工做，可是我出于解释目的添加了它。

clipboard.png

事例源码：https://codepen.io/shadeed/pe...

Aria Hidden

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

<button>
    Menu
    <svg aria-hidden="true"><!-- --></svg>
</button>

在上面的例子中，咱们有一个带有标签和图标的菜单按钮。为了向屏幕阅读器隐藏图标，添加了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');
});

图片描述

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

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

clipboard.png

简而言之，accessibility tree是屏幕阅读器用户能够访问的全部内容的列表。在咱们的例子中，导航列表在那里，而它在视觉上是隐藏的。咱们须要解决两个问题:

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

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

clipboard.png

事例源码：https://codepen.io/shadeed/pe...

菜单动画-好的例子

为了修正这个错误，咱们须要使用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将显示什么：

clipboard.png

事例源码：https://codepen.io/shadeed/pe...

自定义复选框

clipboard.png

默认的复选框设计很难自定义，所以，咱们须要为复选框建立自定义设计。让咱们看看基本的 HTML：

<p class="c-checkbox">
  <input class="sr-only" type="checkbox" name="" id="c1">
  <label class="c-checkbox__label" for="c1">Custom checkbox</label>
</p>

要自定义复选框，咱们须要以一种可访问的方式隐藏输入。为此，应该使用position和其余属性。有一个常见的CSS类，称为sr-only或visual -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/pe...

　隐藏按钮

clipboard.png

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

原文：https://www.sitepoint.com/hid...

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

交流

文章每周持续更新，能够微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程