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

Question

HTML 有一个属性hidden ，可以用来隐藏内容。

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

CSS 具有display:none规则，该规则也可用于隐藏内容并将内容本应占用的空间返回到文档流。

article { display:none; }

从视觉上看，它们看起来是一样的。 在语义上有什么区别吗？ 在计算上？

关于何时使用其中一个或另一个，我应该考虑哪些准则？

Answer 1

关键的区别似乎是hidden的元素总是隐藏的，无论呈现方式如何：

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

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

由于 CSS 可以针对不同的媒体/演示文稿类型，因此display: none将取决于给定的演示文稿。 例如，在桌面浏览器中查看时，某些元素可能会display: none ，但在移动浏览器中则不会。 或者，在视觉上隐藏但仍然可供屏幕阅读器使用。

Answer 2

简单的规则：

您是否隐藏了某些内容，因为它在语义上还不是页面内容的一部分，例如一系列尚未触发的潜在错误消息？ 使用hidden 。

您是否隐藏了属于页面内容的一部分，例如将段落切换到折叠的 state 以避免混乱？ 使用display:none 。

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

不幸的是， hidden不会覆盖任何display CSS，即使不应该显示不属于页面的内容在直觉上也是如此。 如果您希望hidden得到尊重，请添加此 css 规则： [hidden] { display: none !important }

例子：

1. 使用hidden表示在填写表格之前不应作为页面一部分存在的“谢谢”消息。

2. 对一系列潜在的错误消息使用hidden ，这些错误消息可能会根据用户在页面上的操作显示给用户。 在发生错误之前，这些错误在语义上不是页面内容的一部分。

3. 使用display: none用于仅在用户悬停或单击菜单按钮时显示的导航。

4. 将display: none用于选项卡式窗格，其中选项卡式窗格的唯一原因是同时向用户显示所有窗格会过于庞大。 （也许如果用户有足够宽的屏幕，所有窗格都会显示。因此，窗格始终是页面内容的一部分，因此 CSS 表示逻辑是合适的选择）。

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

注意：可访问性设备将受益于了解导航或存在但当前未显示的内容与当前不被视为页面一部分且因此不应向用户描述的内容之间的区别。

Answer 3

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;}

---

添加辅助功能：

然而......除了视觉呈现之外，还有更多需要考虑的事情。 我们还应该迎合屏幕阅读器以最大限度地提高可访问性（对吗？），所以上面的第二个选项应该更恰当地看起来像这样：

• 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 与 go 的组合如何，请注意：

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

1. display: none;
2. visibility: hidden; （不显示，但仍保留空间）
3. opacity: 0;
4. width: 0; height: 0;
5. aria-hidden="true"
6. 在表单数据的情况下， input type="hidden"

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

Answer 4

这两者都隐藏了一个元素，但区别与布局有关，显示：无