乐趣区

关于前端:了解一下-targettext-选择器

jiezi

最近在 MDN 官网看到了一个从未见过的选择器，::target-text。

简略钻研了一下，感觉还有点意思，也有点理论用途，当初分享一下。

一、::target-text 是干什么的

想必大家都用过 :target 这个选择器，能够很不便的从 URL 中匹配到页面上的内容，并且实现锚定定位。比方文档目录上常常看到这样的

然而，:target必须要求页面中蕴含 id 为该指标的元素，如果不存在就没方法定位了。为了解决这个问题，于是，::target-text就呈现了！

从字面意思上来看，::target-text 示意 ” 锚定文本 ” 选择器。官网 MDN 上的形容为：

如果浏览器反对 滚动到文本片段 这个个性，则会滚动到这部分文本所在的中央，并且容许用户自定义高亮显示该局部文本款式。

什么意思呢，这里官网有一个例子 scroll-to-text demo

能够看到点击这个链接后，浏览器主动跳转到指定的文本片段，并且该文本会有高亮的款式（图中的紫色背景，红色文字）。

于是，::target-text能够用来自定义这部分的款式

::target-text {
  background-color: rebeccapurple;
  color: white;
}

不过，反对的款式比拟无限，和 ::selection 差不多，仅反对文本相干款式

二、如何指定跳转地位

咱们都晓得，:target是通过在 URL 上指定 # 加 id 来匹配的，如下

http://www.example.com/index.html#section2

<section id="section2">Example</section>

回到方才那个例子，能够看到跳转链接是这样的

能够看到，::target-text 也是有对应的规定的，如下

http://www.example.com/index.html#:~:text=textStart

这里的 textStart 就是示意页面中须要跳转的文本内容。不过须要留神的是，如果有多段文本都可能匹配，那么会定位到第一个相匹配的文本（和 id 有点相似）。

三、如何精准的定位

单纯的指定一小段文本，很容易呈现定位不准的状况（太容易反复了）。为了解决这个问题，有两个计划

  1. 尽量指定长的文本，这样就不会反复了
  2. 在文本前后加上限度，比方起始点字符

计划一尽管可行，然而也有问题，一是地址栏太长，不太好看，而是我只须要分享这一小段内容进来，不须要那么多。当初看下计划二。这里简略介绍下 :~:text 的残缺语法

#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
  • prefix- 前缀文本
  • textStart 文本开始
  • textEnd 文本完结
  • -suffix 后缀文本

从语法上，只有 textStart 是必填，其余都是可选。怎么用的呢？假如咱们想定位这一段文本（不蕴含首尾标点）

能够间接指定起始字符，Mlle,parachute

#:~:text=Mlle,parachute

能够拜访这个链接 https://mdn.github.io/css-examples/target-text/index.html#:~:text=Mlle,parachute

成果如下

能够看到定位区域在第一个 parachute 处就完结了，并没有定位到前面的。这时能够持续限度一下，比方把前面的 . 加进来，作为后缀

#:~:text=Mlle,parachute,-.

能够拜访这个链接 https://mdn.github.io/css-examples/target-text/index.html#:~:text=Mlle,parachute,-.

成果如下

这样就能精准的定位到想要的内容了

四、浏览器行为和兼容性

尽管有下面的语法，但实际上浏览器曾经内置了快捷操作。选中一段文本，右键会呈现这样的菜单，有一个“复制指向突出显示的内容的链接”选项（Edge 浏览器提醒略有不同），如下

点击这个会主动复制一段蕴含 #:~:text= 的链接，浏览器会主动解决选中文本的前后限度，保障后果的唯一性。如下，将方才复制的地址间接粘贴在浏览器关上

而后说一下兼容性。

这个属性十分新，能够在 MDN 官网看到具体的兼容信息，须要 Chrome 89+ 以上才行

试了一下安卓零碎上也是没有问题的，比方在微信中关上的成果如下

默认是一个黄色背景（貌似还不能自定义色彩），点击任意中央就隐没了。

比拟适宜在浏览一本书时，想分享某一章节的某一小段精彩文本给别人，这样就能疾速定位到分享的中央了，还能高亮显示。是不是很不便呢？

五、简略总结一下

具体通过本文，应该能够理解到 ::target-text 是什么了吧？上面简略总结一下

  1. ::target-text 和 :target 相似，都能够跳转到指定地位
  2. ::target-text 无需 id，能够指定任意文本
  3. 地址栏匹配规定是 #:~:text=[prefix-,] textStart [,textEnd] [,-suffix]，只有 textStart 是必填，其余都是可选
  4. 浏览器反对“复制指向突出显示的内容的链接”操作，能够不用手动拼接
  5. 兼容性有点差，安卓用户能够应用

当然这自身是一个渐进加强的属性，可能反对体验更好，不反对也没什么小事。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

退出移动版