Textfragmente
Textfragmente ermöglichen das direkte Verlinken auf einen spezifischen Teil eines Textes in einem Webdokument, ohne dass der Autor es mit einer ID versehen muss. Dies erfolgt durch eine spezielle Syntax im URL-Fragment. Unterstützende Browser können selbst entscheiden, wie der verlinkte Text hervorgehoben wird, z. B. durch Farbmarkierungen und/oder das Scrollen zur entsprechenden Stelle auf der Seite. Dies ist nützlich, da es Webinhaltsautoren erlaubt, tief in andere Inhalte zu verlinken, auf die sie keinen direkten Einfluss haben, ohne auf die Anwesenheit von IDs angewiesen zu sein. Darüber hinaus kann dies genutzt werden, um effektivere Links zum Teilen von Inhalten zu erstellen, die Nutzer untereinander weitergeben können.
Konzepte und Verwendung
Historisch gesehen war eine der Kernfunktionen des Webs schon immer seine Fähigkeit, Links zwischen verschiedenen Dokumenten bereitzustellen – das ist es, was das Web zu einem Netz macht:
- Sie können zum Anfang eines Dokuments verlinken, indem Sie auf seine URL verweisen, beispielsweise:
- Sie können zu einem spezifischen Abschnitt in einem Dokument verlinken, indem Sie dessen URL plus das Dokumentenfragment (ID) des Abschnitts verwenden, beispielsweise:
Das Problem beim Verlinken auf spezifische Dokumentenfragmente ist, dass der Autor der verlinkten Seite einen Anker bereitstellen muss, auf den tatsächlich verlinkt werden kann. Im obigen zweiten Beispiel wird auf ein h2-Element mit der ID browser_compatibility
verlinkt:
<h2 id="browser_compatibility">
<a href="#browser_compatibility">Browser compatibility</a>
</h2>
Wenn die ID geändert oder entfernt wird, wird das Dokumentenfragment ignoriert, und der Link führt lediglich zum Anfang der Seite. Dies ist in Bezug auf eine schrittweise Degradation angemessen, aber es wäre wohl besser, wenn der Autor des Links vollständige Kontrolle darüber hätte, wohin der Link führt, ohne auf den Seitenautor angewiesen zu sein.
Textfragmente machen dies möglich – sie erlauben es Linkautoren, Textinhalte anstelle von Dokumentenfragmenten flexibel als Ziel zu definieren.
Syntax
Ähnlich wie bei Dokumentenfragmenten werden Textfragmente nach einem Rautezeichen (#
) an eine URL angehängt. Die Syntax ist jedoch etwas anders:
https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
Die Hauptbestandteile sind wie folgt zu verstehen:
:~:
-
Auch bekannt als Fragmentrichtlinie, gibt diese Zeichenfolge dem Browser an, dass die folgenden Komponenten eine oder mehrere Benutzeragenten-Anweisungen sind, die beim Laden aus der URL entfernt werden, sodass Skripte des Autors nicht direkt darauf zugreifen können. Benutzeragenten-Anweisungen werden auch als Richtlinien bezeichnet.
text=
-
Eine Textrichtlinie. Diese stellt dem Browser ein Textfragment bereit, das definiert, welcher Text im verlinkten Dokument verlinkt werden soll.
textStart
-
Ein Textstring, der den Anfang des verlinkten Textes spezifiziert.
textEnd
Optional-
Ein Textstring, der das Ende des verlinkten Textes spezifiziert.
prefix-
Optional-
Ein Textstring, gefolgt von einem Bindestrich, der angibt, welcher Text dem verlinkten Text unmittelbar vorausgehen soll, wobei nur Leerzeichen erlaubt sind. Dies hilft dem Browser, den korrekten Text zu identifizieren, wenn es mehrere Übereinstimmungen gibt.
-suffix
Optional-
Ein Bindestrich, gefolgt von einem Textstring, der angibt, welcher Text dem verlinkten Text unmittelbar folgen soll, wobei nur Leerzeichen erlaubt sind. Auch dies hilft dem Browser, den richtigen Text auszuwählen, wenn es mehrere Übereinstimmungen gibt.
Unterstützende Browser scrollen zu und heben das erste Textfragment im verlinkten Dokument hervor, das der spezifizierten Richtlinie entspricht. Beachten Sie, dass es möglich ist, mehrere Textfragmente in derselben URL zu spezifizieren, indem man sie mit Ampersand (&
) Zeichen trennt.
Nutzungsnotizen
-
Textstrings, die als Werte von
textStart
,textEnd
,prefix-
und-suffix
verwendet werden, müssen prozentkodiert werden. Zusätzlich verlangt der Standard, dass das URL-sichere Zeichen'-'
ebenfalls prozentkodiert wird. -
Übereinstimmungen sind nicht groß-/kleinschreibungssensitiv.
-
Einzelne
textStart
,textEnd
,prefix-
und-suffix
Strings müssen vollständig innerhalb desselben Block-Level-Elements liegen, aber vollständige Übereinstimmungen können mehrere Elementgrenzen überspannen. -
Aus Sicherheitsgründen benötigt die Funktion, dass Links in einem 'noopener'-Kontext geöffnet werden – Sie müssen
rel="noopener"
zu Ihren<a>
-Elementen hinzufügen undnoopener
in Ihrenwindow.open()
-Aufrufen verwenden, wenn Sie diese Funktion einsetzen. -
Textfragmente werden nur bei durch den Nutzer initiierten Navigationen aufgerufen.
-
Textfragmente werden nur auf den Hauptframe angewendet; Text wird nicht in
<iframe>
s durchsucht, undiframe
-Navigation aktiviert kein Textfragment. -
Websites, die sich gegen diese Funktion entscheiden möchten, können in Chromium-basierten Browsern eine Document Policy Header-Wert senden, damit Benutzeragenten keine Textfragmente verarbeiten:
httpDocument-Policy: force-load-at-top
Hinweis: Wenn das bereitgestellte Textfragment mit keinem Text im verlinkten Dokument übereinstimmt oder wenn der Browser Textfragmente nicht unterstützt, wird das gesamte Textfragment ignoriert und der Link führt zum oberen Teil des Dokuments.
Beispiele
Einfaches Textfragment mit textStart
- https://example.com#:~:text=for scrollt zu und hebt die erste Instanz des Textes
for
im Dokument hervor. - https://developer.mozilla.org/de/docs/Web/HTML/Element/a#:~:text=human scrollt zu und hebt die erste Instanz des Textes
human
im Dokument hervor. - https://developer.mozilla.org/de/docs/Web/HTML/Element/a#:~:text=linked%20URL scrollt zu und hebt die erste Instanz des Textes
linked URL
im Dokument hervor.
textStart und textEnd
- https://developer.mozilla.org/de/docs/Web/HTML/Element/a#:~:text=human,URL scrollt zu und hebt eine Textzeichenkette hervor, die mit
human
beginnt und mitURL
endet. - https://developer.mozilla.org/de/docs/Web/HTML/Element/a#:~:text=linked%20URL,defining%20a%20value scrollt zu und hebt eine Textzeichenkette hervor, die mit
linked URL
beginnt und mitdefining a value
endet. Beachten Sie, wie der hervorgehobene Text mehrere Block-Level-Elemente überspannt.
Beispiele mit prefix- und/oder -suffix
- https://example.com#:~:text=asking-,for scrollt zu und hebt die zweite Instanz des Textes
for
im Dokument hervor. - https://developer.mozilla.org/de/docs/Web/HTML/Element/a#:~:text=sent-,referrer scrollt zu und hebt die erste Instanz des Textes
referrer
hervor, bei der der Textsent
direkt davor steht. Dies ist die fünfte Instanz vonreferrer
im Dokument; ohne das Präfix würde die erste Instanz hervorgehoben. - https://developer.mozilla.org/de/docs/Web/HTML/Element/a#:~:text=linked%20URL,-'s%20format scrollt zu und hebt die erste Instanz des Textes
linked URL
hervor, bei der der Text's format
direkt danach steht. Dies ist die fünfte Instanz vonlinked URL
im Dokument; ohne das Suffix würde die erste Instanz hervorgehoben.
URLs mit mehreren Textfragmenten
Sie können mehrere Textfragmente zum Hervorheben in derselben URL angeben, indem Sie sie mit Ampersand (&
) Zeichen trennen. Schauen wir uns ein paar Beispiele an:
- https://developer.mozilla.org/de/docs/Web/HTML/Element/a#:~:text=Causes&text=linked scrollt zu und hebt die ersten Instanzen der Textstrings
Causes
undlinked
hervor. - https://developer.mozilla.org/de/docs/Web/HTML/Element/a#:~:text=linked%20URL,-'s%20format&text=Deprecated-,attributes,attribute scrollt zu und hebt zwei Textinstanzen hervor:
- Die erste Instanz des Textes
linked URL
, bei der der Text's format
direkt danach steht. - Die erste Instanz einer Textzeichensequenz, die mit
attributes
beginnt und mitattribute
endet, und durch das PräfixDeprecated
spezifiziert wird.
- Die erste Instanz des Textes
Wenn einer oder mehrere Ihrer Textfragmente nicht hervorgehoben werden und Sie sicher sind, dass Sie die Syntax korrekt haben, könnten Sie möglicherweise eine andere Instanz markieren als die, die Sie erwartet haben. Es könnte hervorgehoben, aber außerhalb des Bildschirms sein.
Styling von markierten Textfragmenten
Browser sind frei, den hervorgehobenen Text auf irgendeine standardmäßige Weise zu gestalten. Das CSS Pseudo-Elements Module Level 4 definiert ein Pseudo-Element, ::target-text
, mit dem Sie eine individuelle Gestaltung festlegen können.
Zum Beispiel haben wir in unserer scroll-to-text Demo folgendes CSS:
::target-text {
background-color: rebeccapurple;
color: white;
}
Versuchen Sie, den obigen Link in einem unterstützenden Browser zu folgen, um den Effekt zu sehen.
Erkennbarkeit der Funktion
Das FragmentDirective
-Objekt, das über die Document.fragmentDirective
-Eigenschaft aufgerufen wird, kann verwendet werden, um zu testen, ob Textfragmente in einem Browser unterstützt werden.
Probieren Sie Folgendes in den Entwicklertools eines unterstützenden Browsers aus, in einem Tab mit einem oder mehreren hervorgehobenen Textfragmenten:
document.fragmentDirective;
// returns an empty FragmentDirective object, if supported
// undefined otherwise
Diese Funktionalität ist derzeit hauptsächlich für die Feature-Erkennung gedacht. In Zukunft könnte das FragmentDirective
-Objekt zusätzliche Informationen enthalten.
Referenz
API
FragmentDirective
-
Ein Objekt, das die Textfragmente darstellt. Derzeit leer und hauptsächlich für die Feature-Erkennung gedacht.
Document.fragmentDirective
-
Gibt das
FragmentDirective
für das aktuelle Dokument zurück.
CSS
::target-text
-
Stellt die hervorgehobenen Textfragmente im aktuellen Dokument dar. Es ermöglicht Autoren, das Styling der Textfragmente anzupassen.
Spezifikationen
Specification |
---|
URL Fragment Text Directives # fragmentdirective |
CSS Pseudo-Elements Module Level 4 # selectordef-target-text |
Browser-Kompatibilität
html.elements.a.text_fragments
BCD tables only load in the browser
api.FragmentDirective
BCD tables only load in the browser
css.selectors.target-text
BCD tables only load in the browser