隐藏属性 (HTML5) 和 display:none 规则 (CSS) 有啥区别？

Posted 2023-05-07

【中文标题】隐藏属性 (HTML5) 和 display:none 规则 (CSS) 有啥区别？

【英文标题】：What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?隐藏属性 (HTML5) 和 display:none 规则 (CSS) 有什么区别？

【发布时间】：2011-10-06 04:47:48

【问题描述】：

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

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

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

article  display:none; 

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

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

TIA。

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

【问题讨论】：

甚至不知道hidden 属性的存在，但肯定是一个好问题，因为它似乎违反了结构/表示分离。

对于那些还没有读过关于这个属性的 HTML5 规范的人：w3.org/TR/html5/editing.html#the-hidden-attribute

w3.org/html/wg/wiki/ChangeProposals/removehidden

已经读过了，@Yigit。它也有一年多的历史。并且隐藏仍然在规范中。这将向我表明该提案没有赢得任何转换。

感谢您的编辑。抱歉没有说清楚！您在上面添加的信息很棒。 +1

【参考方案1】：

关键的区别似乎在于hidden 元素总是被隐藏而不管呈现方式：

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

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

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

【讨论】：

所以你是说隐藏的王牌显示？如果是这样，那么您是说它的目的只是覆盖演示文稿。嗯。

我的猜测是，是的，隐藏的王牌显示。但是，我还没有真正尝试过它。如果 css 可以覆盖它，那似乎毫无意义。

语义获胜。如果它不应该存在，则将其从文档级别的文档流中删除。如果它应该是文档流程的一部分，但在某些情况下您不希望它成为视觉体验的一部分，则在装饰层处理它。请记住，一些代理尝试解析 CSS，如果他们确定某些内容不会被看到，那么他们根本不会输出它。我认为这是异常行为，但有助于了解。

这里涉及到一些cmets (@james-garris, @newtron)，根据developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…，显示实际上胜过隐藏-去图:-)

我在 MDN 页面上发现 hidden 属性的一个重要区别：“更改具有 hidden 属性的元素的 CSS display 属性的值会覆盖行为。例如，元素样式 display: flex 将是尽管存在隐藏属性，但仍显示。"

【参考方案2】：

简单规则：

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

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

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

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

例子：

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

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

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

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

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

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

【参考方案3】：

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) <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 组合，请注意：

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

display: none; visibility: hidden;（不显示，但仍保留空间） opacity: 0; width: 0; height: 0; aria-hidden="true" 对于表单数据，input type="hidden"

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

【讨论】：

屏幕阅读器等无障碍设备将受益于了解现有但当前未显示的内容（以防止混乱）与标记为hidden且当前不属于页面内容的内容之间的区别.

是的，这是一个很好的观点，@AndrewParks...但我想hidden 最终会成为一种更短（并且可能不太直观？）的表达方式：class="hidden" aria-hidden="true"。见What's the difference between HTML 'hidden' and 'aria-hidden' attributes? 和Using the aria-hidden attribute

【参考方案4】：

这两者都隐藏了一个元素，但不同之处在于布局与 display:none 元素将显示为好像没有任何东西，但在可见性方面：hidden 它也隐藏了一个元素但影响布局