How do these symbols (text Fragments) work in the "#:~:text=" URL?

Asked

Viewed 50 times

1

I see some sites use these symbols #:~:text= links as a way of highlighting the text or a certain part of the text of the site on which it is relevant.

As, for example, below is opened a MDN page and is colored the background of the title "Javascript" to yellow:

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript#:~:text=JavaScript">Click</a>

Only that I did not find any reference explaining better about this feature, so some doubts arose my as:

  • Is there any term to better express these symbols?

  • How to change the background text (other than yellow)?

  • Why does this feature not work when the attribute target with the value _blank is included in the anchor?

  • It changes the background or the selection page?

  • If this feature exists, it is possible to style text with other styles?

html css

1 answer

2


This is a recent feature (possible from Chrome 81, for example) that allows you to create a link that also determines a position in a particular text present on the page, which will be highlighted. This is a new part of the URL (in addition to query string, hash, etc) which is called text Fragment.

The text Fragment is basically a way to specify a text in a URL. Thus, when the user uses a link that contains it, the text will be highlighted, drawing the user’s attention.

The simplest way is this (which should be placed at the end of the URL):

#:~:text=textStart

So that textStart is encoded in the format URL encoded.

You can also specify the end of the deployment explicitly, so:

#:~:text=textStart,textEnd

The syntax also allows you to configure prefixes, infixes and suffixes. To learn more, see here.

Being textStart and textEnd coded in URL encoded.

Because this feature does not work when the attribute target with the value _blank is included?

It’s not that it doesn’t work with the attribute target _blank. Only for this you must make explicit that the link is also of the type noopener. For security reasons, text Fragments only work on character links noopener. Behold:

<a
  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript#:~:text=JavaScript"
  target="_blank"
  rel="noopener"
>Click</a>

Normal links (whose target is _self implicitly) are already noopener by default, so it is not necessary to make explicit the rel="noopener" in all cases.

It changes the background or the selection page?

I don’t think so, because there shouldn’t be a selection on the page at the time the text Fragment is appearing (since for this the user must have just entered the page). Once the user clicks on text Fragment, he is removed.

If this feature exists it is possible to style text with other styles?

I couldn’t find any way to customize one text Fragment, but I believe this is due to the small maturity of this resource (which is still very new and has not even been implemented in all browsers). Probably in the future it will be possible to style them with a pseudo selector.

I leave here this link, to understand all the motivation and syntax of this new resource.

It is important to point out that the support between browsers is still laughable, since, at the time I write, only browsers Chromium-based have implemented this feature. Nevertheless, it is something interesting and can be used (since it does not tend to break the validity of a URL).

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.