隐藏属性的可视化弱点

有一个 HTML 属性可以准确地执行您认为它应该执行的操作

<div>I'm visible</div>
<div hidden>I'm hidden</div>

它甚至拥有 极佳的浏览器支持。它有用吗？嗯，也许吧。实际上并没有。

Adam Laki 喜欢它的语义

如果我们使用 hidden 属性，我们的语义会稍微好一些。任何人都能理解元素上“hidden”属性的含义。

Monica Dinculescu 称之为谎言

hidden 规则是用户代理样式，这意味着它比轻微的喷嚏还不太具体。这意味着您最喜欢的 display 样式将覆盖它

<style>
  div { display: block; }
</style>
<div hidden>
  lol guess who's not hidden anymore
  hint: it's this thing
</div>

因此有两个相关的问题……

1. 它非常弱。实际上，对具有任何强度选择器的元素上的 display 属性的任何更改（除了 none 值之外）都将覆盖它。就像任何其他显示属性（如 width 或其他属性）一样，只不过在元素上主动使用 hidden 属性且它实际上并没有隐藏时，感觉有点糟糕。
2. display 属性不幸地承担了过多的责任。如果 hidden 是一个 CSS 属性，可以负责元素的可见性/访问性，而不是控制其块类型的相同属性，那将非常酷。但唉，网络的向后兼容性永远存在（这对网络的整体健康来说是一件好事）。

如果您真的喜欢该属性的语义，Monica 建议

[hidden] { display: none !important; }

这似乎是任何“重置”或基本样式表的一个不错的补充。

否则，使用类隐藏内容的经典技术绝对没问题。我通常有一个实用程序类

.hide, .hidden {
  display: none;
}

但请记住，总是有无数种方法可以完成任务。我发现自己经常使用一次性隐藏/显示机制。例如，一个菜单，您需要用炫酷的方式切换其可见性，但始终保持可访问……

.menu {
   opacity: 0;
   visibility: hidden;
   transition: 0.2s;
   transform: translateX(20px);
   &[data-open] {
     opacity: 1;
     visibility: visible;
     transform: translateX(0);
   }
}