收起内容部分(有时称为“手风琴式折叠”)是一种常见的界面模式。不过,您无法使用页内查找功能搜索收起的部分中隐藏的内容。此外,系统也无法链接到收起区域内的文本片段。
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 属性,而不是常规“hidden”属性应用的 display:none
属性。这对于在内容处于关闭状态时搜索内容至关重要,但也存在以下副作用:
- 某些布局 API(例如
getBoundingClientRect
)会报告hidden=until-found
元素中的隐藏内容会占用空间,并且在页面中具有位置。 - 系统不会渲染
hidden=until-found
元素的子节点,但hidden=until-found
元素本身仍会显示一个框。这意味着边框和显式尺寸等 CSS 属性仍会影响渲染。
例如,以下演示会向应用了 hidden=until-found
的元素添加边距、边框和内边距。隐藏内容将显示在带灰色边框的框中,当隐藏内容显示时,该框会填充相应内容。这是隐藏元素的框。
为避免此问题,请将边框添加到包含 hidden=until-found
的容器中嵌套的元素。