使用 hide=until-found 使收起的内容可供访问

乔伊·阿哈尔
Joey Arhar

折叠内容部分(有时称为手风琴式折叠)是一种常见的界面模式。但是,隐藏在收起部分中的内容无法使用“在网页中查找”搜索功能进行搜索。此外,也无法链接到收起区域内的文本片段

hidden=until-found HTML 属性和 beforematch 事件可以解决这些问题。将 hidden=until-found 添加到隐藏内容的容器后,浏览器便可以搜索该隐藏区域中的文本,并在找到匹配项时显示该部分。

Chrome 102 中提供了这些功能,下面我们来看看这些功能的运作方式。

使用方法

如果您的网站已有可供用户搜索的可收起版块,请使用 hidden=until-found 属性替换用于隐藏该版块的样式。如果您的网页还有另一种状态,需要与您的部分是否显示保持同步,请添加一个 beforematch 事件监听器,该监听器会在浏览器显示 hidden=until-found 元素之前触发。

注意事项

为了提供一致的用户体验,hidden=until-found 内容应该无需使用“在网页中查找”功能便可显示。并非所有用户都会使用“在网页中查找”,并且不支持 hidden=until-found 的浏览器将获得隐藏内容的原始体验,而不会显示“在网页中查找”。

若要确保您的隐藏内容可在不支持 hidden=until-found 的浏览器上搜索到,可以随时在这些浏览器中展开隐藏内容。您可以通过检查是否存在 beforematch 事件处理脚本来完成特征检测:

if (!(‘onbeforematch' in document.body)) {
  // expand all hidden content
}

hidden=until-found 会应用 content-visibility:hidden CSS 属性,而不是常规隐藏属性应用的 display:none 属性。如果想在内容关闭时搜索内容,您需要使用此键,但也会带来以下负面影响:

  • 某些布局 API(例如 getBoundingClientRect)会报告 hidden=until-found 元素内的隐藏内容会占用空间并在页面中有位置。
  • hidden=until-found 元素的子节点将不会渲染,但 hidden=until-found 元素本身仍会有一个框。这意味着边框和明确尺寸等 CSS 属性仍会影响呈现。

例如,以下演示为应用了 hidden=until-found 的元素添加了外边距、边框和内边距。隐藏内容显示的位置是一个带有灰色边框的框,当隐藏内容显示出来后,它会填充其中。这是隐藏元素的方框。

为避免此问题,请为嵌套在包含 hidden=until-found 的容器内的元素添加边框。

主打图片:Thomas Bormans 提供。