用文本片段突出链接中的文本

主要观点:介绍了 URL 文本片段的使用及相关特性,包括在不同浏览器中的支持情况、构建 URL 的方法、样式设置以及浏览器支持数据等。
关键信息:

  • URL 文本片段是 W3C 草案,2020 年起在一些主要浏览器中存在,目前 Chrome、Edge、Safari 和 Firefox 有较好支持,Firefox 较晚支持,Safari 2022 年加入。
  • 可在 Safari 中通过复制突出显示文本的链接来生成文本片段,也可手动添加#:~:text=及 URL 编码后的文本等,还可添加前缀和后缀,语法为#:~:text=[prefix-,]start[,end][,-suffix]
  • Chrome 团队有关于文本片段的优秀文章,MDN 也有相关页面。
  • 文本片段的样式默认类似<mark>,可通过::target-text选择器更改,目前 Safari 正式版本不支持,Safari 18.2 的测试版支持。
    重要细节:
  • 文中给出了具体的代码示例,如生成链接的方式和样式设置的代码::target-text { background-color: oklch(from var(--color-blue) l c h / 0.35); }等。
  • 提到逗号和连字符在文本片段语法中也需 URL 编码。
  • 提供了 caniuse.com 上关于 url-scroll-to-text-fragment 功能在主要浏览器中支持情况的图片。
阅读 16
0 条评论