<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,但不是移动浏览器。或者,隐藏在视觉上,但仍然可用于屏幕阅读器。