比 'Ctrl+F' 更智能:直接链接到网页内容

主要观点:介绍了文本片段(Text fragments)这一现代网络平台的强大功能,无需添加锚点即可精确链接到网页中的特定文本,还介绍了其基本语法、使用方法、样式设置、浏览器支持及回退行为等,最后提及相关资源和更新内容。
关键信息:

  • 文本片段可通过在 URL 末尾添加特殊语法实现,如https://example.com/page.html#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
  • prefix-textStarttextEnd-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 页面等。
阅读 8
0 条评论