Bienvenue sur mon compte public : détective front-end
Récemment, j'ai vu un sélecteur que je n'avais jamais vu auparavant sur le site officiel de MDN,::texte-cible。
Après une brève recherche, je pense que c'est un peu intéressant et pratique, donc je vais le partager maintenant.
1. Que fait ::target-text
Tout le monde doit avoir utilisé :targetce sélecteur, qui peut facilement faire correspondre le contenu de la page à partir de l'URL et obtenir un positionnement d'ancre. Par exemple, je vois souvent ceci dans le répertoire des documents
Cependant, la :targetpage doit obligatoirement contenir idl'élément qui est la cible, et s'il n'existe pas, il n'y a aucun moyen de le localiser. Afin de résoudre ce problème, donc, ::target-textil est apparu!
Littéralement, ::target-text signifie le sélecteur "texte d'ancrage". La description sur le MDN officiel est :
Si le navigateur prend en charge la fonctionnalité de défilement vers un fragment de texte , il défilera jusqu'à l'endroit où se trouve cette partie du texte et permettra à l'utilisateur de personnaliser le style de surbrillance de cette partie du texte.
Que voulez-vous dire, voici un exemple officieldémo de défilement vers le texte
Vous pouvez voir qu'après avoir cliqué sur ce lien, le navigateur passe automatiquement au fragment de texte spécifié et le texte aura un style en surbrillance (fond violet dans la figure, texte blanc).
Par conséquent, ::target-textil peut être utilisé pour personnaliser le style de cette partie
::target-text {
background-color: rebeccapurple;
color: white;
}
复制代码Cependant, les styles pris en charge sont relativement limités, et ::selectionpresque, seuls les styles liés au texte sont pris en charge
2. Comment spécifier la position de saut
Nous savons tous que la correspondance :targetse fait en spécifiant #un identifiant sur l'URL, comme suit
http://www.example.com/index.html#section2
<section id="section2">Example</section>
复制代码En revenant à l'exemple tout à l'heure, vous pouvez voir que le lien de saut est comme ceci
Comme vous pouvez le voir, ::target-text il existe également des règles correspondantes, comme suit
http://www.example.com/index.html#:~:text=textStart
复制代码这里的textStart就是表示页面中需要跳转的文本内容。不过需要注意的是，如果有多段文本都能够匹配，那么会定位到第一个相匹配的文本（和 id 有点类似）。
三、如何精准的定位
单纯的指定一小段文本，很容易出现定位不准的情况（太容易重复了）。为了解决这个问题，有两个方案
- 尽量指定长的文本，这样就不会重复了
- 在文本前后加上限制，比如起始点字符
方案一虽然可行，但是也有问题，一是地址栏太长，不太美观，而是我只需要分享这一小段内容出去，不需要那么多。现在看下方案二。这里简单介绍下:~:text的完整语法
#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
复制代码- prefix- 前缀文本
- textStart 文本开始
- textEnd 文本结束
- -suffix 后缀文本
从语法上，只有 textStart 是必填，其他都是可选。怎么用的呢？假设我们想定位这一段文本（不包含首尾标点）
可以直接指定起始字符，Mlle,parachute
#:~:text=Mlle,parachute
复制代码可以访问这个链接 mdn.github.io/css-example…
效果如下
可以看到定位区域在第一个parachute处就结束了，并没有定位到后面的。这时可以继续限制一下，比如把后面的.加进来，作为后缀
#:~:text=Mlle,parachute,-.
复制代码可以访问这个链接 mdn.github.io/css-example…
效果如下
这样就能精准的定位到想要的内容了
四、浏览器行为和兼容性
虽然有上面的语法，但实际上浏览器已经内置了快捷操作。选中一段文本，右键会出现这样的菜单，有一个“复制指向突出显示的内容的链接”选项（Edge浏览器提示略有不同），如下
点击这个会自动复制一段包含#:~:text=的链接，浏览器会自动处理选中文本的前后限制，保证结果的唯一性。如下，将刚才复制的地址直接粘贴在浏览器打开
然后说一下兼容性。
这个属性非常新，可以在 MDN 官网看到具体的兼容信息，需要 Chrome 89+ 以上才行
试了一下安卓系统上也是没有问题的，比如在微信中打开的效果如下
默认是一个黄色背景（貌似无法自定义），点击任意地方就消失了。
Il est plus approprié lorsque vous lisez un livre et que vous souhaitez partager un petit morceau de texte merveilleux d'un certain chapitre avec d'autres, afin que vous puissiez rapidement localiser l'endroit à partager et le mettre en évidence. Est-ce très pratique ?
Cinq, un bref résumé
A travers cet article, vous devriez pouvoir comprendre de ::target-textquoi il s'agit, non ? Ci-dessous un bref résumé
- ::target-text est similaire à :target, les deux peuvent sauter à la position spécifiée
- ::target-text Aucun identifiant requis, n'importe quel texte peut être spécifié
- La règle de correspondance de la barre d'adresse est #:~:text=[prefix-,] textStart [,textEnd] [,-suffix], seul textStart est requis, les autres sont facultatifs
- Le navigateur prend en charge l'opération "Copier le lien vers le contenu en surbrillance", ce qui élimine le besoin d'assemblage manuel
- La compatibilité est un peu médiocre, les utilisateurs d'Android peuvent l'utiliser
Bien sûr, il s'agit en soi d'une propriété d'amélioration progressive, qui peut mieux prendre en charge l'expérience, et ce n'est pas grave si elle n'est pas prise en charge. Enfin, si vous pensez que c'est bon et utile pour vous, veuillez aimer, mettre en signet et transférer ❤❤❤
Bienvenue sur mon compte public : détective front-end