隐藏属性（HTML5）和显示：无规则（CSS）之间有什么区别？

HTML5有一个新的全局属性，

hidden

，可以用来隐藏内容

第1条
同侧眼线

CSS有

display:none

规则，也可以用来隐藏内容

article { display:none; }

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

什么时候应该使用什么指南？< /P> 蒂亚

---

编辑：根据@newtron的回答（如下），我做了更多的搜索。

hidden

属性去年备受争议，而且（显然）几乎没有进入HTML5规范。一些人认为它是多余的，没有任何意义。据我所知，最终的评估是：如果我只针对网络浏览器，没有区别。（有一个页面甚至断言web浏览器使用了

display:none

来实现隐藏属性。）但如果我考虑可访问性（例如，可能我希望我的内容被屏幕阅读器读取），那么就有区别了。CSS规则

display:none

可能会对web浏览器隐藏我的内容，但相应的aria规则（例如，

aria hidden=“false”

）可能会尝试读取它。因此，我现在同意@newtron的答案是正确的，尽管可能（可以说）没有我想的那么清楚。感谢@newtron的帮助。

关键区别似乎在于

隐藏的
元素总是隐藏的，无论演示如何：

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


由于CSS可以针对不同的媒体/演示类型，
display:none
将依赖于给定的演示。例如，在桌面浏览器中查看时，某些元素可能具有
显示：none
，但在移动浏览器中则没有。或者，可视地隐藏，但屏幕阅读器仍然可以使用。
简单规则：

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

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

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

不幸的是，
hidden
不会覆盖任何
display
CSS，即使从直觉上看，不属于页面的内容永远不应该显示。如果您希望尊重
隐藏
，请添加以下css规则：
[hidden]{display:none！important}

示例：

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


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


使用
display:none
进行导航，该导航仅在用户悬停或单击菜单按钮时显示


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


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


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

hidden
属性（HTML5）和
显示：无
规则（CSS）

MDN确认：

更改具有
hidden
属性覆盖该行为

我们可以直截了当地说明这一点：


。隐藏{
显示：无；
}
.不隐藏{
显示：块
}

第2段：此内容目前与此页面无关，因此不应显示。这里没什么可看的。娜达

第4段：此内容目前与此页面无关，因此不应显示。这里没什么可看的。Nada。
这两个选项都隐藏了一个元素，但区别与显示布局有关：无一个元素将显示为除了可见性之外什么都没有：隐藏它也隐藏了一个元素，但af除外