Textfragmente

Historisch gesehen war eine der wichtigsten Funktionen des Webs immer seine Fähigkeit, Links zwischen verschiedenen Dokumenten bereitzustellen – das ist, was das Web zu einem Netz macht:

• Sie können zum Anfang eines Dokuments verlinken, indem Sie seine URL verwenden, zum Beispiel:
  • https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/a.
• Sie können zu einem bestimmten Abschnitt eines Dokuments verlinken, indem Sie seine URL plus das Dokumentfragment (ID) dieses Abschnitts verwenden, zum Beispiel:
  • https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/a#browser_compatibility.

Das Problem beim Verlinken zu bestimmten Dokumentfragmenten besteht darin, dass der Autor der verlinkten Seite einen Anker setzen muss, um tatsächlich darauf zu verlinken. Das zweite Beispiel oben verlinkt zu einem h2-Element mit der ID browser_compatibility:

<h2 id="browser_compatibility">
  <a href="#browser_compatibility">Browser compatibility</a>
</h2>

Wenn die ID geändert oder entfernt wird, wird das Dokumentfragment ignoriert und der Link führt nur zum Seitenanfang. Dies ist in Bezug auf eine reibungslose Degradation sinnvoll, doch es wäre besser, wenn der Autor des Links die volle Kontrolle darüber hätte, wohin sie verlinken, ohne auf den Seitenautor angewiesen zu sein.

Textfragmente machen dies möglich – sie erlauben es Link-Autoren, Textinhalt anstelle von Dokumentfragmenten auf flexible Weise zu spezifizieren.

https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

Textfragmente sind eine Art URL-Fragment und werden nach dem # geschrieben. Die wesentlichen Teile sind:

:~:

Auch bekannt als das Fragment-Direktiv, teilt diese Zeichenfolge dem Browser mit, dass was folgt eine oder mehrere Nutzeragenten-Instruktionen sind, die während des Ladens von der URL entfernt werden, so dass Autorenskripte nicht direkt mit ihnen interagieren können. Nutzeragenten-Instruktionen werden auch Direktiven genannt.

text=

Eine Text-Direktive. Sie bietet dem Browser ein Textfragment, das definiert, welcher Text im verlinkten Dokument zu verlinken ist.

textStart

Eine Textzeichenfolge, die den Anfang des verlinkten Textes angibt.

textEnd Optional

Eine Textzeichenfolge, die das Ende des verlinkten Textes angibt.

prefix- Optional

Eine Textzeichenfolge gefolgt von einem Bindestrich, die angibt, welcher Text direkt dem verlinkten Text vorausgehen soll, wobei nur Leerzeichen dazwischen erlaubt sind. Dies hilft dem Browser, den korrekten verlinkten Text auszuwählen, wenn es mehrere Übereinstimmungen gibt.

-suffix Optional

Ein Bindestrich gefolgt von einer Textzeichenfolge, die angibt, welcher Text dem verlinkten Text direkt folgen soll, wobei nur Leerzeichen dazwischen erlaubt sind. Dies hilft dem Browser, den korrekten verlinkten Text auszuwählen, wenn es mehrere Übereinstimmungen gibt.

Unterstützende Browser werden zum ersten Textfragment scrollen und es hervorheben, dessen Direktive mit der angegebenen übereinstimmt. Beachten Sie, dass es möglich ist, mehrere Textfragmente in derselben URL zu spezifizieren, indem diese mit dem Zeichen & getrennt werden.

• Die für die Werte textStart, textEnd, prefix- und -suffix verwendeten Textzeichenfolgen müssen prozentkodiert sein. Darüber hinaus erfordert der Standard, dass das URL-sichere Zeichen '-' ähnlich prozentkodiert wird.

• Übereinstimmungen sind nicht case-sensitiv.

• Einzelne textStart, textEnd, prefix- und -suffix Zeichenfolgen müssen vollständig innerhalb desselben Block-Level-Elements liegen, aber vollständige Übereinstimmungen können sich über mehrere Elementgrenzen erstrecken.

• Aus Sicherheitsgründen sollten Sie, wenn Sie dieses Merkmal verwenden, um auf eine seitenfremde Seite zu verlinken, den Link in einem noopener-Kontext öffnen – Sie müssen rel="noopener" zu Ihren <a>-Elementen hinzufügen und noopener zu Ihren window.open() Aufrufen hinzufügen, wenn Sie dieses Merkmal verwenden.

• Textfragmente werden nur bei Benutzernavigationen aufgerufen.

• Textfragmente werden nur auf den Hauptframe angewendet; Text wird nicht innerhalb von <iframe>s durchsucht, und iframe-Navigation wird kein Textfragment aufrufen.

• Für Websites, die sich abmelden möchten, unterstützen Chromium-basierte Browser einen Document Policy-Headerwert, den sie senden können, damit Benutzeragenten keine Textfragmente verarbeiten:

  http

  Document-Policy: force-load-at-top
  

• https://example.com/#:~:text=for scrollt zur ersten Instanz des Textes for im Dokument und hebt diese hervor.
• https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/a#:~:text=human scrollt zur ersten Instanz des Textes human im Dokument und hebt diese hervor.
• https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL scrollt zur ersten Instanz des Textes linked URL im Dokument und hebt diese hervor.

• https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/a#:~:text=human,URL scrollt zur ersten Instanz eines Textes, der mit human beginnt und mit URL endet, und hebt diesen hervor.
• https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL,defining%20a%20value scrollt zur ersten Instanz eines Textes, der mit linked URL beginnt und mit defining a value endet, und hebt diesen hervor. Beachten Sie, wie der hervorgehobene Text sich über mehrere Block-Level-Elemente erstreckt.

• https://example.com/#:~:text=asking-,for scrollt zur zweiten Instanz des Textes for im Dokument und hebt diesen hervor.
• https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/a#:~:text=sent-,referrer scrollt zur ersten Instanz des Textes referrer, dem der Text sent direkt vorausgeht. Dies ist die 5. Instanz von referrer im Dokument; ohne den Prefix würde die erste Instanz hervorgehoben.
• https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL,-'s%20format scrollt zur ersten Instanz des Textes linked URL, der vom Text 's format direkt gefolgt wird. Dies ist die 5. Instanz von linked URL im Dokument; ohne den Suffix würde die erste Instanz hervorgehoben.
• https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/a#:~:text=downgrade:-,The%20Referer,be%20sent,-to%20origins scrollt zur Instanz des Textes The Referer ... be sent, die von downgrade: vorangegangen und von to origins gefolgt wird. Dies illustriert ein komplexeres Beispiel, bei dem der Prefix/Suffix verwendet wird, um auf die spezifische Textinstanz hinzuweisen, zu der Sie verlinken möchten. Versuchen Sie beispielsweise, den Prefix zu entfernen, und sehen Sie, was hervorgehoben wird.

Sie können mehrere Textfragmente in derselben URL angeben, indem Sie diese mit dem Zeichen & trennen. Schauen wir uns ein paar Beispiele an:

• https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/a#:~:text=Causes&text=linked scrollt und hebt die ersten Instanzen der Textzeichenfolgen Causes und linked hervor.
• https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL,-'s%20format&text=Deprecated-,attributes,attribute scrollt und hebt zwei Textinstanzen hervor:
  • Die erste Instanz des Textes linked URL, die vom Text 's format direkt gefolgt wird.
  • Die erste Instanz einer Textzeichenfolge, die mit attributes beginnt und mit attribute endet und von Deprecated vorangegangen wird.

Wenn Sie annehmen, dass einer oder mehrere Ihrer Textfragmente nicht hervorgehoben werden, obwohl Sie sicher sind, dass Ihre Syntax korrekt ist, könnten Sie einfach eine andere Instanz hervorheben, als die Sie erwartet haben. Es könnte hervorgehoben sein, aber außerhalb des sichtbaren Bereichs.

Browser sind frei, den hervorgehobenen Text auf beliebige, standardmäßige Weise zu gestalten. Das CSS Pseudo-Elements Module Level 4 definiert ein Pseudoelement, ::target-text, mit dem Sie benutzerdefiniertes Styling spezifizieren können.

Zum Beispiel haben wir in unserem scroll-to-text-Demo folgendes CSS:

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

Versuchen Sie, obigen Link in einem unterstützenden Browser zu folgen, um die Wirkung zu sehen.

Das FragmentDirective-Objekt, auf das über die Document.fragmentDirective-Eigenschaft zugegriffen wird, kann verwendet werden, um zu testen, ob Textfragmente in einem Browser unterstützt werden.

Versuchen Sie, Folgendes in den DevTools eines unterstützenden Browsers in einem Tab mit einem oder mehreren passenden Textfragmenten auszuführen:

document.fragmentDirective;
// returns an empty FragmentDirective object, if supported
// undefined otherwise

Diese Funktionalität ist derzeit hauptsächlich für die Erkennung von Funktionen vorgesehen. In Zukunft könnte das FragmentDirective-Objekt zusätzliche Informationen enthalten.

FragmentDirective

Ein Objekt, das die Textfragmente darstellt. Derzeit leer und hauptsächlich zur Merkmalsdetektion vorgesehen.

Document.fragmentDirective

Gibt die FragmentDirective für das aktuelle Dokument zurück.

::target-text

Repräsentiert die hervorgehobenen Textfragmente im aktuellen Dokument. Es erlaubt Autoren, das Styling von Textfragmenten anzupassen.

• Boldly link where no one has linked before: Text Fragments