Html hidden 属性 (HTML5) 和 display:none 规则 (CSS) 有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6708247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?
提问by james.garriss
HTML5 has a new global attribute, hidden, which can be used to hide content.
HTML5 有一个新的全局属性 ，hidden可用于隐藏内容。
<article hidden>
<h2>Article #1</h2>
<p>Lorem ipsum ...</p>
</article>
CSS has the display:nonerule, which can also be used to hide content.
CSS 有display:none规则，也可以用来隐藏内容。
article { display:none; }
Visually, they are identical. What is the difference semantically? Computationally?
在视觉上，它们是相同的。在语义上有什么区别？计算上？
What guidelines should I consider on when to use one or the other?
关于何时使用其中之一，我应该考虑哪些准则？
TIA.
TIA。
EDIT: Based on @newtron's responses (below), I did more searching. The hiddenattribute was hotly contested last year and (apparently) barely made it into the HTML5 spec. Some argued it was redundant and had no purpose. From what I can tell, the final evaluation is this: If I'm targeting only web browsers, there is no difference. (One page even asserted that web browsers used display:noneto implement the hidden attribute.) But if I'm considering accessibility (e.g., perhaps I expect my content to be read by screen-readers), then there is a difference. The CSS rule display:nonemight hide my content from web browsers, but a corresponding aria rule (e.g., aria-hidden="false") might try to read it. Thus, I now agree that @newtron's answer is correct, though perhaps (arguably) not as clear as I might like. Thanks @newtron for your help.
编辑：根据@newtron 的回复（如下），我进行了更多搜索。该hidden属性在去年引起了激烈争论，并且（显然）几乎没有进入 HTML5 规范。有些人认为这是多余的，没有目的。据我所知，最终评估是这样的：如果我只针对 Web 浏览器，则没有区别。（有一页甚至断言 Web 浏览器过去常常display:none实现隐藏属性。）但如果我考虑可访问性（例如，也许我希望我的内容可以被屏幕阅读器阅读），那么就会有所不同。CSS 规则display:none可能会在 Web 浏览器中隐藏我的内容，但相应的 aria 规则（例如，aria-hidden="false") 可能会尝试阅读它。因此，我现在同意@newtron 的答案是正确的，尽管可能（可以说）没有我想要的那么清楚。感谢@newtron 的帮助。
采纳答案by newtron
The key difference seems to be that hiddenelements are always hidden regardless of the presentation:
关键的区别似乎是hidden无论呈现如何，元素总是被隐藏：
The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.
hidden 属性不得用于隐藏可以在另一个演示文稿中合法显示的内容。例如，在选项卡式对话框中使用 hidden 来隐藏面板是不正确的，因为选项卡式界面只是一种溢出演示——同样可以在一个带有滚动条的大页面中显示所有表单控件。使用此属性仅从一个演示文稿中隐藏内容同样是不正确的 - 如果某些内容被标记为隐藏，则它对所有演示文稿都是隐藏的，例如，包括屏幕阅读器。
http://dev.w3.org/html5/spec/Overview.html#the-hidden-attribute
http://dev.w3.org/html5/spec/Overview.html#the-hidden-attribute
Since CSS can target different media/presentation types, display: nonewill be dependent on a given presentation. E.g. some elements might have display: nonewhen viewed in a desktop browser, but not a mobile browser. Or, be hidden visually but still available to a screen-reader.
由于 CSS 可以针对不同的媒体/演示文稿类型，display: none因此将取决于给定的演示文稿。例如，某些元素display: none在桌面浏览器中查看时可能具有，但在移动浏览器中没有。或者，在视觉上隐藏但仍可供屏幕阅读器使用。
