在网页中隐藏元素

在平时的开发工作中，有时会有隐藏元素的需求。比如，一个按钮，需要在桌面端隐藏，在手机端显示；一个导航栏，需要在手机端隐藏，在桌面端显示。“隐藏”不是字面上展示的这样简单，它还包含几层意思：

元素完全从文档流中移除的隐藏。
元素仅仅是视觉上的隐藏，使用像屏幕阅读器（screen reader）这样的辅助技术（assistive technology，简称“AT”）依然是能访问的。
元素在视觉上可见，不过对屏幕阅读器是隐藏的，即屏幕阅读器是无法访问的。

通过本篇文章，你将会学到利用 HTML/CSS 隐藏元素的方法，内容涵盖了可访问性、动画和使用案例。我们一起来看看吧！

HTML5 hidden 属性
这是在 HTML 标签上使用的一个布尔值属性。在浏览器加载页面的时候，使用 hidden 属性修饰的元素，渲染效果与 display: none 类似。当然，如果使用 CSS 手动重写了 hidden 属性的话，就另当别论了。
来看下面的例子：

这部分包含了一个标题、图片和描述信息。图片只会在视口宽度大于 400px 的时候才显示。这里我给 加了一个 hidden 属性。
我写了一段 CSS 代码，让 hidden 属性修饰的图片在视口宽度大于 400px 的时候显示。
img[hidden] {
display: none;
}

@media (min-width: 400px) {
img[hidden] {
display: block;
}
}
复制代码下面是在大视口（大于 400px）下的渲染效果。

Demo
你可能要问了，为什么不直接使用 display: none 呢？好问题。图片使用 hidden 属性控制带来的好处是——即使 CSS 由于某种原因没有加载成功，图片也会隐藏。

hidden 属性对可访问性的影响
hidden 会将元素完全从页面隐藏，所以屏幕阅读器是无法访问。如果只是出于视觉表现的目的，一定要避免使用。

CSS display 属性
每个元素都有一个默认的 display 值，可能是 inline-block、block、table 等等。我们使用 display: none 就能达到隐藏元素的效果，并且该元素的所有后代都和它一起隐藏了。
与上面代码类似，不过这次我们使用了 display: none：