隐藏属性（HTML5）和display：none rule（CSS）之间有什么区别？ [英] What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?

问题描述

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

 < article hidden> 
< h2>文章＃1< / h2> 
< p> Lorem ipsum ...< / p> 
< / article> 
  

CSS有 display：none 其也可以用于隐藏内容。

  article {display：none; } 
  

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

我应该考虑什么时候使用一个或另一个？

TIA。 p>

编辑：根据@ newtron的回应（下方），我进行了更多搜寻。 hidden 属性在去年热烈争论，（显然）几乎没有纳入HTML5规范。有人认为这是多余的，没有目的。从我可以告诉，最后的评价是这样的：如果我的目标只有web浏览器，没有什么区别。 （一页甚至断言Web浏览器使用 display：none 来实现隐藏属性。）但是如果我考虑可访问性（例如，我可能期望我的内容被读取通过屏幕阅读器），那么就有区别。 CSS规则 display：none 可能会隐藏我的内容从网络浏览器，但相应的咏叹调规则（例如， aria-hidden =false code>）可能会尝试读取它。因此，我现在同意@ newtron的回答是正确的，虽然也许（可以说）不像我想要的那么清楚。感谢@newtron的帮助。

解决方案

关键区别似乎是 hidden 元素总是隐藏，而不管演示：

隐藏属性不能用于隐藏可以合法显示的内容另一个演示。例如，使用隐藏来隐藏标签对话框中的面板是不正确的，因为标签页界面仅仅是一种溢出呈现 - 同样可以在一个大页面中使用滚动条显示所有表单控件。使用此属性来隐藏来自一个演示文稿的内容也是不正确的 - 如果某项标记为隐藏，则对所有演示文稿（包括屏幕阅读器）都是隐藏的。

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

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

HTML5 has a new global attribute, hidden, which can be used to hide content.

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

CSS has the display:none rule, which can also be used to hide content.

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.

EDIT: Based on @newtron's responses (below), I did more searching. The hidden attribute 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:none to 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:none might 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.

解决方案

The key difference seems to be that hidden elements are always hidden regardless of the presentation:

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.

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

Since CSS can target different media/presentation types, display: none will be dependent on a given presentation. E.g. some elements might have display: none when viewed in a desktop browser, but not a mobile browser. Or, be hidden visually but still available to a screen-reader.

这篇关于隐藏属性（HTML5）和display：none rule（CSS）之间有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！