hidden

hidden

hidden全局属性表示了浏览器是否应该渲染元素的内容，即是否应该呈现给用户。

属性值

1. 空字符串。
2. hidden。
3. unitl-found，兼容性比较差。

注意点

hidden属性不应该仅用于从一个表示中隐藏内容。如果某物被标记为隐藏，它将从所有表示中隐藏，包括屏幕阅读器等。

隐藏的元素不应该从非隐藏的元素中链接。例如，使用href属性链接到一个带有hidden属性的部分是不正确的。如果内容不适用或不相关，则没有理由链接到它。

一个带有hidden属性的<canvas>元素可以被脚本图形引擎用作离屏缓冲区，而表单控件可以使用其form属性引用一个隐藏的表单元素。

隐藏元素的后代仍然是可用的，这意味着脚本元素仍然可以执行，表单元素仍然可以提交。

状态

与hidden属性关联的有两种状态：隐藏状态和隐藏直到找到状态。

1. 空字符串、hidden或者无效的值，都会将元素设置为隐藏状态，其本质就是display: none;。

<span hidden>I'm hidden</span>
<span hidden="">I'm also hidden</span>
<span hidden="hidden">I'm hidden too!</span>
<span hidden="nothing">I'm hidden too!</span>

Web浏览器可能使用display: none来实现隐藏状态，此时元素不会参与页面布局。这也意味着改变隐藏状态元素的CSS的display属性值将覆盖该状态，即使存在hidden属性。

2. unitl-found设置元素隐藏直到找到状态。

在该状态中，元素是隐藏的，但其内容将对浏览器的在页面中查找功能(Command + F)或片段导航可访问。

如果这些特性导致滚动到隐藏直到找到的子树中的一个元素，浏览器会：

1. 在隐藏元素上触发beforematch事件。
2. 从元素中移除hidden属性。
3. 滚动到元素。

这使开发人员能够折叠一部分内容，但通过片段导航使其可搜索和可访问。

有一点需要注意，现在的浏览器通过content-visibility: hidden实现until-found，这意味着：

1. 此元素将会参与页面布局。
2. 其margin、padding、border和background将被渲染。

此外，元素需要受到布局约束的影响才能被显示。这意味着，如果处于隐藏状态的元素具有display值为none、contents或inline，则该元素将不会被“查找页面”或“片段导航”所显示。

如下示例，试试按下Command + F会发生什么吧？

demo.html

<a href="#until-found-box">Go to hidden content</a>

<div>I'm not hidden</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>
<div>I'm not hidden</div>

demo.css

 div {
    height: 40px;
    width: 300px;
    border: 5px dashed black;
    margin: 1rem 0;
    padding: 1rem;
    font-size: 2rem;
 }

 div#until-found-box {
     color: red;
     border: 5px dotted red;
     background-color: lightgray;
 }

demo.js

const untilFound = document.querySelector("#until-found-box");

untilFound.addEventListener(
    "beforematch",
    () => (untilFound.textContent = "I've been revealed!"),
);