jam*_*iss 105 html css html5 visibility
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实现隐藏属性.)但是如果我正在考虑可访问性(例如,我希望我的内容可以被屏幕阅读器读取),那么就会有所不同.CSS规则display:none可能会将我的内容隐藏在Web浏览器中,但相应的咏叹调规则(例如aria-hidden="false")可能会尝试阅读它.因此,我现在同意@newtron的答案是正确的,尽管可能(可以说)并不像我想的那样清楚.感谢@newtron的帮助.
new*_*ron 59
关键的区别似乎是,hidden无论演示如何,元素总是被隐藏:
隐藏属性不得用于隐藏可合法显示在其他演示文稿中的内容.例如,使用隐藏来隐藏选项卡式对话框中的面板是不正确的,因为选项卡式界面仅仅是一种溢出显示 - 同样可以通过滚动条在一个大页面中显示所有表单控件.使用此属性仅从一个演示文稿中隐藏内容同样不正确 - 如果某些内容被标记为隐藏,则会隐藏所有演示文稿,例如屏幕阅读器.
http://dev.w3.org/html5/spec/Overview.html#the-hidden-attribute
由于CSS可以针对不同的媒体/演示文稿类型,display: none因此将取决于给定的演示文稿.例如,某些元素display: none在桌面浏览器中查看时可能有,但不是移动浏览器.或者,视觉上隐藏但仍可供屏幕阅读器使用.
hidden属性（HTML5）和display:none规则（CSS）有什么区别？
MDN确认：
display使用属性更改元素上的 CSS 属性值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>这表明以下之间的表现差异为零：
<p hidden><p class="hidden">哪里.hidden {display: none;}那么...hidden和class="hidden"是可以互换的，对吧？
错误的。
添加辅助功能：
除了视觉呈现之外，还有更多需要考虑的因素。我们还应该迎合屏幕阅读器以最大限度地提高可访问性（对吗？），因此上面的第二个选项应该更正确地如下所示：
<p class="hidden" aria-hidden="true">哪里.hidden {display: none;}为什么使用 aclass="hidden"和aria-hidden="true"比使用 更好hidden？
因为我们知道可以使用级联或特异性来覆盖 CSS，并且我们知道这aria-hidden涉及到屏幕阅读器等可访问性用户代理。
相比之下，HTML5hidden属性则要粗略得多。它没有明确说明它做什么或不做什么——而且更糟糕的是，它似乎暗示它做了实际上没有做的事情。
请参阅： 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"
简单规则：
您是否隐藏了某些内容，因为它在语义上还不是页面内容的一部分，例如尚未触发的一系列潜在错误消息？用hidden.
您是否隐藏了页面内容的一部分，例如将段落切换到折叠状态以避免混乱？使用display:none.
hidden是关于语义（某些东西当前是否是页面内容的一部分）并且display: none是关于页面内容的呈现。
不幸的是，hidden不会覆盖任何displayCSS，即使不应该显示不属于页面的内容具有直观的意义。如果你想hidden被尊重，添加这个css规则：[hidden] { display: none !important }
例子：
使用hidden了“谢谢你”的消息，直到形式已被填补不应作为页面的一部分而存在。
使用hidden一系列潜在的错误信息可能被显示给用户根据自己的页面上操作。在发生错误之前，这些错误在语义上不是页面内容的一部分。
使用display: none用于导航，其仅示出当用户将鼠标悬停或点击菜单按钮。
使用display: none标签式窗格，其中用于标签式窗格的唯一原因是，这将是过于庞大，以同时显示用户所有的窗格。（也许如果用户有足够宽的屏幕，所有窗格都会显示。因此，窗格始终是页面内容的一部分，因此 CSS 呈现逻辑是合适的选择）。
使用display: none崩溃文档内一个段落或部分。这表明该段落仍然是页面内容的一部分，但为了方便用户，我们已将其隐藏。
注意：无障碍设备将受益于了解存在但当前未显示的导航或内容与当前不被视为页面一部分的内容之间的区别，因此不应向用户描述。