使用 hide=until-found 使收起的内容可供访问
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
折叠内容部分(有时称为手风琴式折叠)是一种常见的界面模式。但是,隐藏在收起部分中的内容无法使用“在网页中查找”搜索功能进行搜索。此外,也无法链接到收起区域内的文本片段。
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 提供。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2022-04-28。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2022-04-28\u3002"}
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2022-04-28。"]]