Textfragmente

Historisch gesehen war eine der Hauptfunktionen des Webs schon immer die Möglichkeit, Verknüpfungen zwischen verschiedenen Dokumenten bereitzustellen — das macht das Web zu einem Netz:

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

Das Problem beim Verlinken auf bestimmte Dokumentfragmente ist, dass der Autor der verlinkten Seite einen Anker setzen muss, um tatsächlich dahin 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 verweist einfach auf den Anfang der Seite. Dies ist in Bezug auf eine sanfte Degradation angemessen, aber es wäre wohl besser, wenn der Autor des Links die volle Kontrolle darüber hätte, wohin er verlinkt, ohne auf den Seitenautor angewiesen zu sein.

Textfragmente machen dies möglich — sie erlauben es Linkautoren, Textinhalte anstatt von Dokumentfragmenten anzugeben, zu denen verlinkt werden soll, auf flexible Weise.

Ähnlich wie Dokumentfragmente werden Textfragmente nach einem Rautenzeichen (#) an eine URL angehängt. Die Syntax ist jedoch etwas anders:

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

Die wichtigsten Teile, die es zu verstehen gilt, sind:

:~:

Auch bekannt als Das Fragmentdirektiv, diese Zeichenfolge teilt dem Browser mit, dass das, was folgt, eine oder mehrere Anleitungen für Benutzeragenten sind, die während des Ladens aus der URL entfernt werden, sodass Autorenskripte nicht direkt mit ihnen interagieren können. Anleitungen für Benutzeragenten werden auch Direktiven genannt.

text=

Eine Textdirektive. Diese bietet dem Browser ein Textfragment an und definiert, zu welchem Text im verlinkten Dokument verlinkt werden soll.

textStart

Eine Zeichenkette, die den Anfang des verlinkten Textes angibt.

textEnd Optional

Eine Zeichenkette, die das Ende des verlinkten Textes angibt.

prefix- Optional

Eine Zeichenkette, gefolgt von einem Bindestrich, die angibt, welcher Text unmittelbar vor dem verlinkten Text erscheinen soll, wobei nur Leerzeichen dazwischen erlaubt sind. Dies hilft dem Browser, den richtigen verlinkten Text auszuwählen, falls mehrere Übereinstimmungen vorhanden sind.

-suffix Optional

Ein Bindestrich gefolgt von einer Zeichenkette, die angibt, welcher Text unmittelbar nach dem verlinkten Text erscheinen soll, wobei nur Leerzeichen dazwischen erlaubt sind. Dies hilft dem Browser, den richtigen verlinkten Text auszuwählen, falls mehrere Übereinstimmungen vorhanden sind.

Unterstützende Browser scrollen zu und heben das erste Textfragment im verlinkten Dokument hervor, das der angegebenen Direktive entspricht. Beachten Sie, dass es möglich ist, mehrere Textfragmente anzugeben, die in derselben URL hervorgehoben werden, indem sie mit einem Kaufmannszeichen (&) getrennt werden.

• Die für die Werte textStart, textEnd, prefix- und -suffix verwendeten Zeichenketten müssen prozentkodiert sein. Zusätzlich erfordert der Standard, dass der URL-sichere Bindestrich '-' ähnlich prozentkodiert wird.

• Übereinstimmungen sind nicht case-sensitiv.

• Individuelle textStart, textEnd, prefix- und -suffix Zeichenketten müssen sich vollständig innerhalb desselben Block-level elements befinden, aber vollständige Übereinstimmungen können sich über mehrere Elementgrenzen erstrecken.

• Aus Sicherheitsgründen erfordert die Funktion, dass Links in einem noopener-Kontext geöffnet werden — Sie müssen rel="noopener" zu Ihren <a> Elementen hinzufügen und noopener zu Ihren window.open() Aufrufen hinzufügen, wenn Sie diese Funktion verwenden.

• Textfragmente werden nur bei von Nutzern initiierten Navigationen aufgerufen.

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

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

  httpCopy to Clipboard

  Document-Policy: force-load-at-top
  

• 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/Reference/Elements/a#:~:text=human scrollt zu und hebt die erste Instanz des Textes human im Dokument hervor.
• https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL scrollt zu und hebt die erste Instanz des Textes linked URL im Dokument hervor.

• https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/a#:~:text=human,URL scrollt zu und hebt die erste Instanz einer Zeichenkette hervor, die mit human beginnt und mit URL endet.
• https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL,defining%20a%20value scrollt zu und hebt die erste Instanz einer Zeichenkette hervor, die mit linked URL beginnt und mit defining a value endet. Beachten Sie, wie der hervorgehobene Text sich über mehrere Blocklevel-Elemente erstreckt.

• 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/Reference/Elements/a#:~:text=sent-,referrer scrollt zu und hebt die erste Instanz des Textes referrer hervor, die den Text sent direkt davor hat. Dies ist die 5. Instanz von referrer im Dokument; ohne das Präfix würde die erste Instanz hervorgehoben.
• https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL,-'s%20format scrollt zu und hebt die erste Instanz des Textes linked URL hervor, die direkt danach den Text 's format hat. Dies ist die 5. Instanz von linked URL im Dokument; ohne das 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 zu und hebt die Instanz des Textes The Referer ... be sent hervor, die mit downgrade: vorangestellt und mit to origins nachgestellt ist. Dies veranschaulicht ein komplexeres Beispiel, bei dem das Präfix/Suffix verwendet wird, um den spezifischen Text zu fokussieren, den Sie verlinken möchten. Versuchen Sie zum Beispiel, das Präfix zu entfernen und zu sehen, was übereinstimmt.

Sie können mehrere Textfragmente angeben, die in derselben URL hervorgehoben werden, indem Sie sie mit einem Kaufmannszeichen (&) trennen. Schauen wir uns ein paar Beispiele an:

• https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/a#:~:text=Causes&text=linked scrollt zu und hebt die ersten Instanzen der Textzeichenketten 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 zu und hebt zwei Textinstanzen hervor:
  • Die erste Instanz des Textes linked URL, der direkt von 's format gefolgt wird.
  • Die erste Instanz einer Textzeichenkette, die mit attributes beginnt und mit attribute endet, und durch Deprecated vorangestellt ist.

Wenn Sie eines oder mehrere Ihrer Textfragmente nicht hervorgehoben sehen und sicher sind, dass Sie die Syntax korrekt haben, könnten Sie möglicherweise eine andere Instanz hervorheben als die, die Sie erwartet haben. Es könnte hervorgehoben sein, aber außerhalb des Bildschirms.

Browser sind frei, den hervorgehobenen Text nach Belieben standardmäßig zu gestalten. Das CSS Pseudo-Elements Module Level 4 definiert ein Pseudoelement, ::target-text, das es Ihnen ermöglicht, eine benutzerdefinierte Gestaltung zu spezifizieren.

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

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

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

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.

Versuchen Sie, das Folgende 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 Funktionserkennung gedacht. In der Zukunft könnte das FragmentDirective-Objekt zusätzliche Informationen enthalten.

FragmentDirective

Ein Objekt, das die Textfragmente repräsentiert. Derzeit leer und hauptsächlich für die Funktionserkennung gedacht.

Document.fragmentDirective

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

::target-text

Repräsentiert die hervorgehobenen Textfragmente im aktuellen Dokument. Es ermöglicht es Autoren, die Gestaltung von Textfragmenten anzupassen.

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