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