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

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

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

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

HTML5 隐藏属性

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

考虑下面的例子：

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

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

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-block、block、table等等。要隐藏具有display属性的元素，我们应该使用display: none。当一个元素使用display: none隐藏时，它的所有后代都将被删除。

考虑下面的例子：

img {
  display: none;
}

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

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

注意，当蓝皮书被隐藏时，它已被完全从堆栈中删除。为它保留的空间已经消失了。同样的概念也适用于在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/pen/3c1e8d7d69bcf03aa875e3e50d0ffe02?editors=1100

可访问性对display: none的影响

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

Opacity

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

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

img {
    opacity: 0;
}

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

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

更新:2020年1月13日

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

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

可访问性对opacity: 0的影响

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

Visibility

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

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

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

「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/pen/03caf6b36727accb692eecbc38f95d39?editors=1100

可访问性对visibility: hidden的影响

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

Positioning

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

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

「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时，它创建一个裁剪区域，该区域定义应该显示和隐藏哪些部分。

在上面的例子中，透明的黑色区域有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/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100

控制颜色和字体大小

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

颜色透明

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

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 的截图:

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

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

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

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

菜单动画-好的例子

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

「css」

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

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

自定义复选框

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

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

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

###　隐藏按钮

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

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

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

日常开发中，我们通用会选择使用 javascript 切换类来控制它们的状态样式，比如 .open、.closed,.show、.hide。

在本篇文章中，我们将探索以下几个方面内容：

在元素没有子元素的情况下，使用 :empty 伪类来隐藏元素
将 :empty 与 :has() 和 :not() 结合使用，可以处理更多情况
梳理隐藏元素的常见方法

1.隐藏一个空元素

:empty 伪类可以匹配任何没有子元素的元素。当前已经得到所有主流浏览器的支持。如果该元素是一个空元素，我们可以结合 display 属性使用来隐藏元素。

示例：

<style>
  .box {
    display: flex;
    width: 80%;
    height: 80px;
    background-color: #ccc;
    border-radius: 5px;
    margin: 0 auto 10px;
    justify-content: center;
    align-items: center;
  }
  .box:empty {
    display: none;
  }
</style>


<div class="box">1</div>
<div class="box"></div>
<div class="box">3</div>
<div class="box">4</div>

效果如下：

2.和 :has() 和 :not() 结合使用

和 :has() 和 :not() 结合使用时，我们可以在更多复杂场景中使用，比如查找子元素有空元素的元素、隐藏一个不包含某个子元素的父元素等。

2.1.查找子元素为空的父元素

下面的例子是每个 .box 盒子都有一个 span 元素，其中 3 个 span 元素是有文本节点的，一个没有。通过和 :has() 结合使用，我们可以先找到子元素为空的原生 span:empty, 然后通过 .box:has(span:empty) 判断 .box 下是否有子元素 span 为空的父元素，并隐藏它。

<style>
  .box {
    display: flex;
    width: 80%;
    height: 80px;
    background-color: #ccc;
    border-radius: 5px;
    margin: 0 auto 10px;
    justify-content: center;
    align-items: center;
  }
  .box:not(span:has(:empty)) {
    display: none;
  }
</style>
<div class="box"><span>1</span></div>
<div class="box"><span>2</span></div>
<div class="box"><span></span></div>
<div class="box"><span>4</span></div>

效果如下：

2.2.查找不包含某个子元素的父元素

下面的示例是首先查找 .box 元素下有 .text 子元素的父元素，然后使用 .box:not() 进行取反操作，结合 display 属性对元素执行隐藏。

<style>
  .box {
    display: flex;
    width: 80%;
    height: 80px;
    background-color: #ccc;
    border-radius: 5px;
    margin: 0 auto 10px;
    justify-content: center;
    align-items: center;
  }
  .box:not(.box:has(.text)) {
    display: none;
  }
</style>
<div class="box"><span class="text">1</span></div>
<div class="box"><span>2</span></div>
<div class="box"><span>3</span></div>
<div class="box"><span class="text">4</span></div>

效果如下：

3.隐藏元素的常见方法

方法一：display: none

此方法使用的最多，该方法会使 DOM 隐藏，触发 Reflow 和 Repaint。

方法二：visiblity: hidden

此方法 DOM 结构无变化，隐藏后仍占据空间，仅会触发 Repaint。结构保留，占据空间，仅触发重绘，不会触发事件（无法选中）。

方法三：opacity: 0

此方法 DOM 结构无变化，隐藏后仍占据空间。

方法四：content-visibility: hidden

它能让用户代理跳过元素的呈现工作（包括布局和绘制），直到需要时才进行，这使得初始页面加载速度大大加快。

方法五：position + left + top

它能让元素脱离文档流，不占用空间，并且通过设置 left 或者 top 属性负值，可以将元素定位到屏幕之外。

方法六：transform: translate(-999px)

它能让元素偏移出视图窗口，空间会占据，但元素实际不在视窗内所以无法交互。

方法七：font-size: 0

通过设置字体大小为0，将行内元素内容隐藏，但是实际空间还在。

方法八：width:0;height:0;overflow:hidden

通过设置元素宽高为0和设置 overflow: hidden 来实现元素隐藏，不占空间。

方法九：hidden property

通过设置 html 标签的 hidden 来实现元素隐藏。

方法十：clip-path

clip-path属性会创建一个裁剪区域，用于确定元素的哪些部分可见。使用clip-path: circle(0)可以达到将元素隐藏的效果。

方法十一：filter: blur(0)

将一个元素的模糊度设置为0, 从而使这个元素“消失”在页面中。

4.最后

随着浏览器对 :empty 、:has() 、:not() 等伪类和方法的支持越来越好，之前使用 js 来实现的功能，完全可以使用 CSS 来替换，替换后有着更好的性能和用户体验。本文最后梳理了隐藏元素的常见方法，如果你有其他方法，欢迎在文章下方留言，欢迎一起讨论和交流。

.效果图

二.相关代码

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>文字隐藏</title>
 <style>
 div.elli{
 border:1px solid;
 overflow:hidden;/*内容会被修剪，并且其余内容是不可见的*/
 white-space:nowrap;/*强制在一行显示*/
 text-overflow:ellipsis;/*显示省略符号来代表被修剪的文本*/
 width:200px;
 height:20px;
 }
 div.clip
 {
 border:1px solid;
 overflow:hidden; /*超出部分隐藏*/
 white-space:nowrap;/*强制在一行显示*/
 text-overflow:clip;
 width:200px;
 height:20px;
 }
 div.hide
 {
 overflow:hidden;
 border:1px solid;
 width:200px;
 height:50px;
 }
 div.scroll
 {
 overflow:scroll;/*内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容*/
 border:1px solid;
 width:200px;
 height:50px;
 }
 </style>
</head>
<body>
<h3 style="color: #98bf21">1.多余文字自动裁剪</h3>
<div class="clip">如果此处的文字较多，将自动裁切裁切裁切裁切</div>
<br>
<h3 style="color: #98bf21">2.多余文字省略号代替</h3>
<div class="elli"><a href="#">如果此处的文字较多，将自动用省略号代替！</a></div>
<br>
<h3 style="color: #98bf21">3.多余文字自动隐藏</h3>
<div class="hide">如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！</div>
<br>
<h3 style="color: #98bf21">4.多余文字出现滚动条</h3>
<div class="scroll">如果此处的文字较多，将出现滚动条！如果此处的文字较多，将出现滚动条！如果此处的文字较多，将出现滚动条！</div>
</body>
</html>

三.名词释义

3.1 overflow

3.2 white-space

3.3 text-overflow

在线咨询

上一篇：HTML培训：如何在HTML中更改文本大小
下一篇：CSS-设置水平居中总结

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

HTML5 隐藏属性

可访问性对hidden的影响

CSS display 属性

如果资源隐藏在CSS中，它们会加载吗？

style 元素

可访问性对display: none的影响

Opacity

更新:2020年1月13日

可访问性对opacity: 0的影响

Visibility

可访问性对visibility: hidden的影响

Positioning

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

Clip Path

可访问性对clip-path的影响

控制颜色和字体大小

颜色透明

字体大小

Aria Hidden

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

动画与互动

菜单动画-好的例子

自定义复选框

1.隐藏一个空元素

2.和 :has() 和 :not() 结合使用

2.1.查找子元素为空的父元素

2.2.查找不包含某个子元素的父元素

3.隐藏元素的常见方法

4.最后

.效果图

二.相关代码

三.名词释义

您的项目需求