Connexion
Smarter than 'Ctrl+F': Linking Directly to Web Page Content
7 novembre 2024 à 15:50
Wow... plutôt que d'utiliser des ancres (anchor) et de faire des liens avec des id, on peut maintenant demander DANS L'URL au navigateur de faire une recherche, de la surligner, et de se placer dessus (et même d'ouvrir l'élément concerné s'il est fermé).
"""
Here’s the basic syntax for a text fragment URL:
https://example.com/page.html#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
Following the hash symbol, we add this special syntax :~: also known as fragment directive then text= followed by:
prefix-: A text string preceded by a hyphen specifying what text should immediately precede the linked text. This helps the browser to link to the correct text in case of multiple matches. This part is not highlighted.
textStart: The beginning of the text you’re highlighting.
textEnd: The ending of the text you’re highlighting.
-suffix: A hyphen followed by a text string that behaves similarly to the prefix but comes after the text. Aslo helpful when multiple matches exist and doesn’t get highlighted with the linked text.
"""
Et on peut le styler avec ::target-text :
"""
::target-text {
background-color: yellow;
}
Note that we are only allowed to change the following properties:
color
background-color
text-decoration and its associated properties (including text-underline-position and text-underline-offset)
text-shadow
stroke-color, fill-color, and stroke-width
custom properties
"""
— Permalien
"""
Here’s the basic syntax for a text fragment URL:
https://example.com/page.html#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
Following the hash symbol, we add this special syntax :~: also known as fragment directive then text= followed by:
prefix-: A text string preceded by a hyphen specifying what text should immediately precede the linked text. This helps the browser to link to the correct text in case of multiple matches. This part is not highlighted.
textStart: The beginning of the text you’re highlighting.
textEnd: The ending of the text you’re highlighting.
-suffix: A hyphen followed by a text string that behaves similarly to the prefix but comes after the text. Aslo helpful when multiple matches exist and doesn’t get highlighted with the linked text.
"""
Et on peut le styler avec ::target-text :
"""
::target-text {
background-color: yellow;
}
Note that we are only allowed to change the following properties:
color
background-color
text-decoration and its associated properties (including text-underline-position and text-underline-offset)
text-shadow
stroke-color, fill-color, and stroke-width
custom properties
"""
— Permalien
