隐藏属性（HTML5）和display：none规则（CSS）之间有什么区别？

时间：2011-07-15 14:09:14

标签： 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规范。有些人认为这是多余的，没有任何目的。据我所知，最终的评估是这样的：如果我只针对网络浏览器，那就没有区别了。 （有一页甚至断言网络浏览器使用display:none来实现隐藏属性。）但是如果我正在考虑可访问性（例如，我希望我的内容可以被屏幕阅读器读取），那么就会有所不同。 CSS规则display:none可能会将我的内容隐藏在网络浏览器中，但相应的咏叹调规则（例如aria-hidden="false"）可能会尝试阅读它。因此，我现在同意@newtron的答案是正确的，尽管可能（可以说）并不像我想的那样清楚。感谢@newtron的帮助。

4 个答案:

答案 0 :(得分：56)

关键区别似乎是hidden元素总是被隐藏，无论演示如何：

  

隐藏属性不得用于隐藏可合法显示在其他演示文稿中的内容。例如，使用隐藏来隐藏选项卡式对话框中的面板是不正确的，因为选项卡式界面仅仅是一种溢出显示 - 同样可以通过滚动条在一个大页面中显示所有表单控件。使用此属性仅从一个演示文稿隐藏内容同样不正确 - 如果某些内容被标记为隐藏，则会隐藏所有演示文稿，例如屏幕阅读器。

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

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

答案 1 :(得分：1)

简单规则：

您是否隐藏某些内容，因为它在语义上还不是页面内容的一部分，例如一系列尚未触发的潜在错误消息？使用hidden。

您是否隐藏了页面内容的一部分，例如将段落切换为折叠状态以避免混乱？使用display:none。

hidden是关于语义的（当前内容是否是页面内容的一部分），而display: none是关于页面内容的表示形式的。

不幸的是，hidden不会覆盖任何display CSS，尽管从直觉上讲，切勿显示不属于页面的内容。如果您希望遵守hidden，请添加以下CSS规则：[hidden] { display: none !important }

示例：

  1. 使用hidden表示“谢谢”消息，该消息在填写表单之前不应该作为页面的一部分出现。

  2. 使用hidden生成一系列可能的错误消息，这些错误消息可能会根据用户在页面上的操作显示给用户。在发生错误之前，这些错误从语义上讲不是页面内容的一部分。

  3. 使用display: none进行导航，该导航仅在用户悬停或单击菜单按钮时显示。

  4. 对选项卡式窗格使用display: none，其中，选项卡式窗格的唯一原因是，它太繁琐，无法同时向用户显示所有窗格。 （也许，如果用户的屏幕足够宽，则会显示所有窗格。因此，窗格始终是页面内容的一部分，因此CSS表示逻辑是适当的选择。）

  5. 使用display: none折叠文档中的段落或节。这表明该段落仍然是页面内容的一部分，但是为了方便用户，我们将其隐藏了。

注意：辅助功能设备将受益于了解导航或存在但当前未显示的内容与当前不被视为页面一部分的内容之间的差异，因此永远不应向用户描述。

/ p>

答案 2 :(得分：1)

hidden属性（HTML5）和 display:none条规则（CSS）？

MDN 确认：

使用元素将CSS display属性的值更改为 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>

这表明两者之间的呈现力零差异：

  • a）<p hidden>
  • b）<p class="hidden"> // .hidden {display: none;}

添加辅助功能：

但是 ...除了可视化演示外，还有更多需要考虑的问题。我们还应该全都迎合屏幕阅读器的需求，以最大限度地提高可访问性（对吗？），因此，紧随其后的第二个选项应该更正确地看起来像这样：

  • b）<p class="hidden" aria-hidden="true"> // .hidden {display: none;}

为什么使用class="hidden"和aria-hidden="true"比使用hidden更好？

因为我们知道可以使用级联或特异性覆盖CSS，并且我们知道 aria-hidden与屏幕之类的可访问性用户代理对话-阅读器。

相比之下，HTML5 hidden属性要粗略得多。它没有明确说明它做什么或不做什么-而且，更糟的是，它似乎暗示它做了它实际上不做的事情。

请参阅： https://meowni.ca/hidden.is.a.lie.html

最终提示：

无论使用哪种HTML，CSS和ARIA组合，请注意：

我们已经有6种方法来隐藏具有不同内容的内容 目的/意图。

  1. display: none;
  2. visibility: hidden;（不显示，但仍保留空格）
  3. opacity: 0;
  4. width: 0; height: 0;
  5. aria-hidden="true"
  6. ，对于表单数据，input type="hidden"

来源： https://davidwalsh.name/html5-hidden#comment-501242

答案 3 :(得分：0)

这两个都隐藏了一个元素，但不同之处在于布局与显示：none 一个元素将被显示，好像没有任何东西，但在可见性方面：隐藏它也隐藏了一个元素，但会影响布局

相关问题
最新问题