主要观点:介绍了 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 功能在主要浏览器中支持情况的图片。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。