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

本文转载自微信公众号「大迁世界」，转载本文请联系大迁世界公众号。

成都创新互联公司专业为企业提供双湖网站建设、双湖做网站、双湖网站设计、双湖网站制作等企业网站建设、网页设计与制作、双湖企业网站模板建站服务，十余年双湖做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

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

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

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

一、HTML5隐藏属性

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

考虑下面的例子：

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

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

 
 
 
 
      
  
  
  
  1. img[hidden] { 
    2.   
  
  
  
  2.   display: none; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. @media (min-width: 400px) { 
    6.   
  
  
  
  6.   img[hidden] { 
    7.   
  
  
  
  7.     display: block; 
    8.   
  
  
  
  8.   } 
    9.   
  
  
  
  9. } 
    10.

事例源码：

https://codepen.io/shadeed/pen/373c8a132e5d72201b935689d6990d16?editors=1100

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

1. 可访问性对hidden的影响

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

二、CSS display 属性

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

考虑下面的例子：

 
 
 
 
      
  
  
  
  1. img { 
    2.   
  
  
  
  2.   display: none; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. @media (min-width: 400px) { 
    6.   
  
  
  
  6.   img { 
    7.   
  
  
  
  7.     display: block; 
    8.   
  
  
  
  8.   } 
    9.   
  
  
  
  9. } 
    10.

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

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

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

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

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

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

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

2. style 元素

值得一提的是，有些元素的默认值是display: none。可以将