by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11844
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、hidden属性新增新值

任意HTML元素，设置hidden属性后，会隐藏自身（样式没有被重置的前提下）。

可能有些人并不知道，hidden属性还支持一个名为until-found值，他可以让内容隐藏，但是在特殊场景下也会显示。

这个特殊场景包括锚点锚定，或者浏览器层面的文字搜索匹配。

我们开看例子。

如下HTML代码：

<div class="container">
  <a href="#zhangxinxu">显示作者名字</a>
  <h5 class="target">
    <p id="zhangxinxu" hidden="until-found">名字是张鑫旭</p>
  </h5>
</div>

我们不妨扔一点样式美化下，至于什么样式不重要，总之，就有会如下所示的实时渲染效果：

此时，我们点击上面的链接文字，触发锚点跳转，就会发现，原本隐藏的<p>元素显示了。

就像下图这样：

大家再试试搜索

如果是桌面端浏览器，试试按下Ctrl+F搜索，例如：

此时，当我们的搜索选项与hidden="until-found"里面的内容匹配的时候，这段内容就突然显示了，且高亮的颜色（橙色背景）和其他区域匹配的文字颜色（黄色背景）不同，如下截图所示：

二、beforematch 事件

until-found隐藏的元素还支持一个名为beforematch的事件，在该元素从隐藏变成显示之前的一瞬间执行。

还是上面的案例，我们给元素加个beforematch事件，让显示的时候，外面的容器边框颜色高亮，则可以这么处理：

const untilFound = document.getElementById("zhangxinxu");
untilFound.addEventListener('beforematch', () => {
  untilFound.closest('div').style.borderColor = 'red';
});

实时测试效果如下（大胆点击链接，看看边框红了没有）：

三、content-visibility: hidden

hidden="until-found"隐藏和传统的hidden隐藏不同，后者是display:none隐藏，但是，前者使用的是content-visibility:hidden隐藏，这个隐藏在我的《CSS新世界》这本书中有介绍。

content-visibility:hidden只会隐藏内容，元素的边框、布局、背景都是保留的，想必visibility: hidden，其不会除非内容渲染，在频繁显隐交互的场景下有更高的性能。

所以，hidden="until-found"直接设置在内容元素上是无效的，例如保持内联水平的<span>元素上，等。

四、until-found的应用场景

基于其“隐藏但可被发现”的特性，hidden=”until-found” 非常适合以下场景：

• 可折叠/可展开内容（如手风琴菜单）：这是比较典型的应用场景。你可以将折叠起来的内容设置为 hidden=”until-found”。这样，即使用户没有展开这些内容，他们仍然可以通过页面查找功能搜索到里面的信息。当用户通过查找或片段导航找到这些隐藏内容时，浏览器会自动移除 hidden 属性并将其显示出来。
• 初始隐藏的提示或帮助信息：页面上有些辅助信息或详细说明可能默认是折叠或隐藏的，以保持界面简洁。使用 hidden=”until-found” 可以确保用户需要通过搜索特定关键词来获取这些帮助信息时，能够轻松找到它们。
• 标签页（Tabs）中未激活的内容：在一些标签页界面中，非当前激活的标签页内容通常是隐藏的。如果你希望用户能通过搜索找到所有标签页内的内容，而不仅仅是当前显示的那个，hidden=”until-found” 可以提供帮助。

至于提高页面内容显隐的渲染性能，这个大家就不用考虑了，没有任何意义，1ms和2ms的差异有区别吗？没有区别，对吧。

五、兼容性、结语、渔获

Safari浏览器已经确定支持该特性，Chrome浏览器已经支持好几年了。

结语

懒得结语

渔获展示

见上一篇文章。

本周钓货回头补上。

好了，就这样吧。

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11844

（本篇完）