隐藏属性(HTML5)和display:none rule(CSS)之间有什么区别?

前端之家收集整理的这篇文章主要介绍了隐藏属性(HTML5)和display:none rule(CSS)之间有什么区别?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
HTML5有一个新的全局属性,隐藏,可以用来隐藏内容
<article hidden>
   <h2>Article #1</h2>
   <p>Lorem ipsum ...</p>
</article>

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

article { display:none; }

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

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

TIA。

编辑:基于@ newtron的回答(下面),我做了更多的搜索。隐藏的属性在去年热烈争论,(显然)几乎没有把它纳入HTML5规范。有人认为这是多余的,没有目的。从我可以告诉,最后的评价是这样的:如果我只定位Web浏览器,没有区别。 (一个页面甚至断言Web浏览器使用display:none来实现隐藏属性。)但是如果我考虑可访问性(例如,我希望我的内容被屏幕阅读器读取),那么有区别。 CSS规则显示:none可能会从网络浏览器中隐藏我的内容,但相应的咏叹调规则(例如,aria-hidden =“false”)可能会尝试读取它。因此,我现在同意@ newtron的答案是正确的,虽然也许(可以说)不如我想的那么清楚。感谢@newtron的帮助。

解决方法

关键的区别似乎是隐藏的元素总是隐藏的,无论演示:

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

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

猜你在找的HTML5相关文章