Learn about the ::target-text selector

Welcome to my public account: front-end detective

Recently I saw a never-before-seen selector on MDN's official website, ::target-text .

After a brief research, I think it is a little interesting and practical, so I will share it now.

1. What does ::target-text do

Everyone must have used it :target this selector can easily match the content on the page from the URL and achieve anchor positioning. For example, I often see this in the document directory

However, :target must require that the page contains id the element of the target, if it does not exist, there is no way to locate it. In order to solve this problem, ::target-text appeared!

Literally, ::target-text means the "anchor text" selector. The description on the official MDN is:

If the browser supports the feature of scrolling to a text fragment , it will scroll to the place where this part of the text is located, and allow the user to customize the highlighting style of this part of the text.

What does it mean, here is an official example scroll-to-text demo

You can see that after clicking this link, the browser automatically jumps to the specified text fragment, and the text will have a highlighted style (purple background in the figure, white text).

So, ::target-text can be used to customize the style of this part

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

However, the supported styles are relatively limited, similar to ::selection , only text-related styles are supported

2. How to specify the jump position

We all know that :target is matched by specifying # on the URL, as follows

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

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

Going back to the example just now, you can see that the jump link is like this

As you can see, ::target-text also has corresponding rules, as follows

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

Here textStart is the text content that needs to be jumped in the page. However, it should be noted that if multiple pieces of text can be matched, the first matching text (similar to id) will be located.

3. How to accurately locate

Simply specifying a small piece of text is prone to inaccurate positioning (too easy to repeat). To solve this problem, there are two solutions

1. Specify as long as possible the text so it doesn't repeat
2. Add restrictions around text, such as starting point characters

Although the first solution is feasible, there are also problems. First, the address bar is too long and not very beautiful, but I only need to share this small piece of content, and I don't need that much. Now look at option two. Here is a brief introduction to the complete syntax of :~:text

 #:~:text=[prefix-,]textStart[,textEnd][,-suffix]

• prefix - prefix text
• textStart text start
• textEnd text end
• -suffix suffix text

Syntactically, only textStart is required, the others are optional. How is it used? Suppose we want to locate this piece of text (without leading and trailing punctuation)

You can directly specify the starting character, Mlle,parachute

 #:~:text=Mlle,parachute

You can visit this link https://mdn.github.io/css-examples/target-text/index.html#:~:text=Mlle,parachute

The effect is as follows

It can be seen that the positioning area ends at the first parachute , and does not locate the latter. At this time, you can continue to limit it, for example, add the following . as a suffix

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

You can visit this link https://mdn.github.io/css-examples/target-text/index.html#:~:text=Mlle,parachute,-.

The effect is as follows

This allows you to pinpoint exactly what you want

4. Browser Behavior and Compatibility

Although there is the above syntax, the browser actually has built-in shortcuts. Select a piece of text, right-click and a menu like this will appear, with a "Copy link to highlighted content" option (Edge browser prompts are slightly different), as follows

Clicking this will automatically copy a link containing #:~:text= , and the browser will automatically process the front and rear limits of the selected text to ensure the uniqueness of the result. As follows, paste the address you just copied directly in the browser to open

Then talk about compatibility.

This property is very new. You can see the specific compatibility information on the MDN official website. Chrome 89+ is required.

I tried it on the Android system and there is no problem. For example, the effect of opening in WeChat is as follows

The default is a yellow background (it seems that the color cannot be customized yet), and it disappears when you click anywhere.

It is more suitable when reading a book and want to share a small piece of wonderful text of a certain chapter with others, so that you can quickly locate the place to share and highlight it. Is it very convenient?

Five, a brief summary

Through this article in detail, you should be able to understand what ::target-text is? Below is a brief summary

1. ::target-text is similar to :target, both can jump to the specified position
2. ::target-text No id needed, any text can be specified
3. The address bar matching rule is #:~:text=[prefix-,] textStart [,textEnd] [,-suffix], only textStart is required, others are optional
4. The browser supports the "Copy link to highlighted content" operation, which eliminates the need for manual stitching
5. Compatibility is a bit poor, Android users can use it

Of course, this is a progressive enhancement property in itself. It can support the experience better, and it is no big deal if it is not supported. Finally, if you think it's good and helpful to you, please like, bookmark, and forward ❤❤❤

Welcome to my public account: front-end detective