隐藏属性（HTML5）和display:none规则（CSS）有什么区别？

Question

隐藏属性（HTML5）和display:none规则（CSS）有什么区别？

158

HTML5有一个新的全局属性hidden，可以用来隐藏内容。

<article hidden>
   <h2>Article #1</h2>
   <p>Lorem ipsum ...</p>
</article>

CSS有display:none规则，它也可以用来隐藏内容。

article { display:none; }

视觉上它们是一样的。在语义和计算方面有什么区别？我应该考虑何时使用其中之一的指南是什么？谢谢。根据@newtron的回答（如下所示），我进行了更多搜索。去年，hidden属性备受争议，并且（显然）几乎没有被纳入HTML5规范中。有些人认为它是多余的，并且没有意义。从我所了解的情况来看，最终的评估是这样的：如果我只针对Web浏览器，则没有区别。（甚至有一个页面声称Web浏览器使用display:none来实现隐藏属性。）但是，如果我考虑到可访问性（例如，也许我希望屏幕阅读器读取我的内容），那么就会有区别。CSS规则display:none可能会将我的内容从Web浏览器中隐藏，但是相应的aria规则（例如，aria-hidden="false"）可能会尝试读取它。因此，我现在同意@newtron的答案是正确的，尽管可以说不太清楚。谢谢@newtron的帮助。

- james.garriss

对于那些还没有阅读过有关该属性的 HTML5 规范的人，请访问以下链接：http://www.w3.org/TR/html5/editing.html#the-hidden-attribute - james.garriss

3个回答

22

简单规则：

如果你因为它还不是页面内容的语义部分而隐藏了一些东西，例如一系列尚未触发的潜在错误消息，请使用hidden。

如果你正在隐藏页面内容的一部分，例如将段落切换到折叠状态以避免杂乱无章，请使用display:none。

hidden关注内容的语义（是否是当前页面内容的一部分），而display:none关注页面内容的呈现。

不幸的是，hidden不会覆盖任何display CSS属性，即使它从直觉上讲，那些不是页面的一部分的东西永远不应该被显示。如果你希望hidden被尊重，请添加这个CSS规则：[hidden] { display: none !important }

示例：

对于填写表单后不应作为页面一部分存在的“谢谢”消息，请使用hidden。
对于可能根据用户在页面上的操作而显示的一系列潜在错误消息，请使用hidden。除非发生错误，否则这些错误不是语义上的页面内容。
对于只有在用户悬停或点击菜单按钮时才显示的导航，请使用display:none。

在选项卡窗格中，若唯一的原因是同时显示所有窗格会使用户不知所措，则使用display:none。（也许如果用户拥有足够宽的屏幕，所有窗格都会显示。因此，这些窗格始终是页面内容的一部分，因此CSS呈现逻辑是合适的选择）。

使用display:none折叠文档中的段落或部分。这表明该段落仍然是页面内容的一部分，但出于方便起见，我们将其隐藏了。

注意：辅助设备可以从知道导航或内容的差异中受益，这些导航或内容当前未显示，与当前不被视为页面的一部分，因此永远不应向用户描述。

- Andrew Parks

8

hidden 属性 (HTML5) 和 display:none 样式规则 (CSS) 有什么区别？

MDN 确认：

在具有 hidden 属性的元素上更改 CSS 的 display 属性值会覆盖该行为。

我们可以直接展示这一点：

.hidden {
  display:none;
}

.not-hidden {
  display: block
}

<p hidden>Paragraph 1: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>
<p class="hidden">Paragraph 2: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>
<p hidden class="not-hidden">Paragraph 3: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>
<p class="hidden not-hidden">Paragraph 4: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>

这表明以下两种写法在可视化上没有区别：

a) <p hidden>
b) <p class="hidden"> 且 .hidden {display: none;}

所以...hidden和class="hidden"是可以互换的，对吗？

不对。

添加辅助功能：

我们需要考虑的不仅是视觉呈现，还应该考虑到屏幕阅读器以最大程度提高可访问性（对吧？），因此上面第二个选项更应该像这样：

b) <p class="hidden" aria-hidden="true"> 且 .hidden {display: none;}

为什么使用class="hidden"和aria-hidden="true"比使用hidden更好？

因为我们知道CSS可以通过级联或特殊性而被覆盖，并且我们知道aria-hidden可以传达给屏幕阅读器等辅助功能用户代理。

相比之下，HTML5的hidden属性就有很多漏洞。它没有明确说明它会做什么或不会做什么-更糟糕的是，它似乎暗示它会做一些实际上并不做的事情。

详见：https://meowni.ca/hidden.is.a.lie.html

最后注意：

无论你选择哪种HTML、CSS和ARIA的组合方式，都要注意：

我们已经有6种用于隐藏内容的方法，具有不同的目的/意图。

display: none;

visibility: hidden;（不显示，但仍保留空间）

opacity: 0;

width: 0; height: 0;

aria-hidden="true"

对于表单数据，input type="hidden"

来源：https://davidwalsh.name/html5-hidden#comment-501242

- Rounin - Standing with Ukraine

1

辅助设备，如屏幕阅读器，可以从了解内容存在但当前未显示（以防止混乱）和标记为“隐藏”的内容并非当前页面内容的区别中受益。 - Andrew Parks

是的，@AndrewParks说得好...但我想hidden可能是一种更短（也可能不太直观？）的传达方式：class="hidden" aria-hidden="true"。请参阅HTML 'hidden' and 'aria-hidden' 属性之间的区别是什么？和使用 aria-hidden 属性。 - Rounin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- newtron · Accepted Answer

关键区别在于，hidden元素始终是隐藏的，无论外观如何：

不能使用hidden属性来隐藏合法显示在另一种呈现方式中的内容。例如，在选项卡对话框中隐藏面板使用hidden是不正确的，因为选项卡界面只是一种溢出显示——同样可以在一个大页面中显示所有表单控件带滚动条。同样，不正确的是使用此属性仅从一个呈现方式中隐藏内容——如果某些内容标记为hidden，则从所有呈现方式中隐藏，包括屏幕阅读器等。

http://dev.w3.org/html5/spec/Overview.html#the-hidden-attribute

由于CSS可以针对不同的媒体/呈现类型进行定位，display:none将依赖于给定的呈现方式。例如，在桌面浏览器中查看时，某些元素可能具有display：none，但在移动浏览器中没有；或者在视觉上被隐藏但仍可供屏幕阅读器使用。