隐藏属性(HTML5)和显示: 无规则(CSS)之间的区别是什么？

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

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

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

article { display:none; }

在视觉上，它们是相同的。在语义上有什么区别? 在计算上有什么区别？

我应该考虑什么样的指导方针，当使用其中之一或其他？

TIA.

编辑 : 根据@newtron 的回复(如下) ，我做了更多的搜索。去年，hidden属性引起了激烈的争论，而且(显然)几乎没有进入 HTML5规范。一些人认为这是多余的，没有任何意义。据我所知，最终的评估是这样的: 如果我只瞄准网页浏览器，那么没有区别。(有一个页面甚至断言网页浏览器使用 display:none来实现隐藏属性。)但是如果我考虑到可访问性(例如，也许我希望我的内容能被屏幕阅读器阅读) ，那么就有区别了。CSS 规则 display:none可能会在浏览器中隐藏我的内容，但是相应的 aria 规则(例如 aria-hidden="false")可能会尝试读取它。因此，我现在同意@newtron 的答案是正确的，尽管也许(可以说)没有我希望的那么清楚。谢谢@newtron 的帮助。

49942 次浏览
小开
最佳答案

关键的区别似乎在于 hidden元素总是隐藏的，而不管其表示形式如何:

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

Http://dev.w3.org/html5/spec/overview.html#the-hidden-attribute

由于 CSS 可以针对不同的媒体/演示文稿类型，因此 display: none将依赖于给定的演示文稿。例如，有些元素在桌面浏览器中可能有 display: none，但在移动浏览器中没有。或者，可视化地隐藏，但仍然可用于屏幕阅读器。

小开

简单的规则:

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

您是否隐藏了页面内容的一部分，比如将段落切换到折叠状态以避免混乱？使用 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折叠文档中的段落或部分。这表明段落仍然是页面内容的一部分，但是为了方便用户，我们已经隐藏了它。

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

小开

hidden属性(HTML5)和 display:none规则(CSS) ? ？

MDN 确认:

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

我们可以直截了当地说:

.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)其中 .hidden {display: none;}

那么... hidden和 class="hidden"是可以互换的，对吧？

错了。

添加辅助功能:

除了视觉表现，还有更多需要考虑的。我们也应该迎合屏幕阅读器 最大限度地提高无障碍性(对吗?)因此，紧接着上面的第二个选项应该更恰当地看起来像这样:

  • B)其中 .hidden {display: none;}

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

因为我们 知道，CSS 可以被覆盖使用级联或特异性，我们 知道，aria-hidden谈到可访问的用户代理，如屏幕阅读器。

相比之下，HTML5hidden属性要粗略得多。它没有明确说明它做了什么或者没有做什么——更糟糕的是，它似乎暗示它做了实际上不做的事情。

参见: < a href = “ https://meowni.ca/hidden.is.a.lie.html”rel = “ nofollow norefrer”> https://meowni.ca/hidden.is.a.lie.html

最后提示:

无论你使用 HTML、 CSS 和 ARIA 的什么组合，请注意:

我们已经有6种方法用不同的 目的/意图。

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

来源: < a href = “ https://davidwalsh.name/html5-hide # comments-501242”rel = “ nofollow noReferrer”> https://davidwalsh.name/html5-hidden#comment-501242


提交答案