主要观点:介绍了文本片段(Text fragments)这一现代网络平台的强大功能,无需添加锚点即可精确链接到网页中的特定文本,还介绍了其基本语法、使用方法、样式设置、浏览器支持及回退行为等,最后提及相关资源和更新内容。
关键信息:
- 文本片段可通过在 URL 末尾添加特殊语法实现,如
https://example.com/page.html#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
。 - 有
prefix-
、textStart
、textEnd
、-suffix
等参数用于精确指定链接的文本范围。 - 支持文本片段的浏览器可通过
::target-text
伪元素设置高亮文本的样式。 - 文本片段目前在所有浏览器中得到支持,
::target-text
在 Safari 中尚未支持但在技术预览版本中可用。 - 可通过
document.fragmentDirective
检测浏览器是否支持该功能。 - 2024 年 10 月 20 日更新,Chromium 基浏览器已具备生成特定文本链接的功能。
重要细节: - 示例链接及对应的截图展示了不同文本片段的效果,如
https://developer.mozilla.org/en-US/docs/Web/URI/Fragment/Text_fragments#:~:text=without%20relying%20on%20the%20presence%20of%20IDs
等。 - 提到文本片段可用于链接到隐藏内容,如 Scott O’Hara 博客中的 details 元素。
- 感谢 Hannah Olukoye 和 Jens Oliver Meiert 的反馈和纠正。
- 提供了相关资源的链接,如 W3C 草案社区组报告、MDN 文档、CSSWG 草案、CanIUse 页面等。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。