Textfragmente

Konzepte und Verwendung

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

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

Das Problem beim Verlinken auf spezifische Dokumentfragmente ist, dass der Autor der verlinkten Seite einen Anker setzen muss, um tatsächlich darauf zu verlinken. Das obige zweite Beispiel verlinkt auf ein h2-Element mit einer ID von browser_compatibility:

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

Nicht alle Dokumente haben solche Anker, und selbst wenn sie es tun, kann das Verlinken auf eine Überschrift viel weniger offensichtlich sein als das direkte Verlinken auf den spezifischen Text, den Sie zitieren. Hier kommen Textfragmente zum Einsatz: Sie erlauben es dem Linkautor, die volle Kontrolle darüber zu haben, auf welchen Text verwiesen wird, ohne dass spezielles Markup im Zieldokument erforderlich ist. Beispielsweise kann eine Suchmaschine auf einen bestimmten Satz in ihren Suchergebnissen verweisen und das Klicken auf den Link führt Sie direkt zu diesem Satz.

Textfragmente haben jedoch auch eine Einschränkung: Text in einem Dokument ist weniger stabil als die Dokumentstruktur. Wenn der Text im verlinkten Dokument aktualisiert wird, passt das Fragment nicht mehr und der Browser navigiert zum Anfang der Seite. Das ist akzeptabel für temporäre Links wie in Suchergebnissen, aber wenn Sie möchten, dass der Link über die Zeit zuverlässig funktioniert, sind Dokumentfragmente möglicherweise verlässlicher.

Syntax

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

Textfragmente sind eine Art URL-Fragment und werden nach dem # geschrieben. Die wichtigsten Punkte zum Verständnis sind folgende:

:~:

Auch bekannt als Fragmentanweisung, teilt diese Zeichenfolge dem Browser mit, dass das, was folgt, eine oder mehrere User-Agent-Anweisungen sind, die beim Laden von der URL entfernt werden, sodass Autorenskripte nicht direkt mit ihnen interagieren können. User-Agent-Anweisungen werden auch als Anweisungen bezeichnet.

text=

Eine Textanweisung. Diese stellt dem Browser ein Textfragment zur Verfügung und definiert, welcher 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 stehen sollte, wobei nur Leerzeichen dazwischen erlaubt sind. Dies hilft dem Browser, den richtigen verlinkten Text zu wählen, wenn es mehrere Übereinstimmungen gibt.

-suffix Optional

Ein Bindestrich gefolgt von einer Zeichenkette, die angibt, welcher Text unmittelbar nach dem verlinkten Text stehen sollte, wobei nur Leerzeichen dazwischen erlaubt sind. Dies hilft dem Browser, den richtigen verlinkten Text zu wählen, wenn es mehrere Übereinstimmungen gibt.

Unterstützende Browser scrollen zum ersten Textfragment im verlinkten Dokument, das der angegebenen Anweisung entspricht, und heben es hervor. Beachten Sie, dass es möglich ist, mehrere Textfragmente in derselben URL anzugeben, indem sie mit dem Zeichen (&) getrennt werden.

Verwendungshinweise

• Für die in textStart, textEnd, prefix- und -suffix verwendeten Zeichenketten müssen prozentcodiert sein. Darüber hinaus erfordert der Standard, dass das URL-sichere Bindestrichzeichen '-' ähnlich prozentcodiert wird.

• Übereinstimmungen sind Groß-/Kleinschreibung-unabhängig.

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

• Aus Sicherheitsgründen sollten Sie beim Verlinken auf eine Cross-Origin-Seite mit dieser Funktion 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 diese Funktion verwenden.

• Textfragmente werden nur bei vom Benutzer initiierten Navigationen aufgerufen.

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

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

  http

  Document-Policy: force-load-at-top
  

Beispiele

Textfragment mit textStart

• https://example.com/#:~:text=use scrollt zum ersten Vorkommen des Textes use im Dokument und hebt ihn hervor.
• https://big.rakal.top/de/docs/Web/HTML/Reference/Elements/a#:~:text=human scrollt zum ersten Vorkommen des Textes human im Dokument und hebt ihn hervor.
• https://big.rakal.top/de/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL scrollt zum ersten Vorkommen des Textes linked URL im Dokument und hebt ihn hervor.

textStart und textEnd

• https://big.rakal.top/de/docs/Web/HTML/Reference/Elements/a#:~:text=human,URL scrollt zur ersten Instanz einer Zeichenkette, die mit human beginnt und mit URL endet, und hebt sie hervor.
• https://big.rakal.top/de/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL,defining%20a%20value scrollt zur ersten Instanz einer Zeichenkette, die mit linked URL beginnt und mit defining a value endet, und hebt sie hervor. Beachten Sie, wie der hervorgehobene Text sich über mehrere Block-Level-Elemente erstreckt.

Beispiele mit prefix- und/oder -suffix

• https://example.com/#:~:text=avoid-,use scrollt zur zweiten Instanz des Textes use im Dokument und hebt ihn hervor.
• https://big.rakal.top/de/docs/Web/HTML/Reference/Elements/a#:~:text=sent-,referrer scrollt zur ersten Instanz des Textes referrer, der den Text sent direkt davor hat. Dies ist die fünfte Instanz von referrer im Dokument; ohne das Präfix würde die erste Instanz hervorgehoben.
• https://big.rakal.top/de/docs/Web/HTML/Reference/Elements/a#:~:text=linked%20URL,-'s%20format scrollt zur ersten Instanz des Textes linked URL, der den Text 's format direkt folgt. Dies ist die fünfte Instanz von linked URL im Dokument; ohne das Suffix würde die erste Instanz hervorgehoben.
• https://big.rakal.top/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 mit downgrade: beginnt und mit to origins endet. Dies ist ein komplexeres Beispiel, bei dem das Präfix/Suffix verwendet wird, um auf die spezifische Textinstanz zu verweisen, die Sie verlinken möchten. Versuchen Sie, das Präfix zu entfernen und sehen Sie, was übereinstimmt.

URLs mit mehreren Textfragmenten

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

• https://big.rakal.top/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://big.rakal.top/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 den Text 's format direkt folgt.
  • Die erste Instanz einer Zeichenkette, die mit attributes beginnt und mit attribute endet, die mit Deprecated gekennzeichnet ist.

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

Styling von hervorgehobenen Textfragmenten

Browser sind frei, den hervorgehobenen Text auf beliebige Standardweise zu gestalten. Das CSS Pseudo-Elements Module Level 4 definiert ein Pseudo-Element, ::target-text, das es ermöglicht, benutzerdefinierte Stile anzugeben.

Zum Beispiel haben wir in unserem scroll-to-text-Demo, den folgenden CSS-Code:

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

Versuchen Sie, den obigen Link in einem unterstützenden Browser zu folgen, um zu sehen, welchen Effekt dies hat.

Funktionsdetektierbarkeit

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

Versuchen Sie, das folgende in den Entwicklertools eines unterstützenden Browsers auszuführen, in einem Tab mit einem oder mehreren übereinstimmenden Textfragmenten:

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

Diese Funktionalität ist derzeit hauptsächlich zur Feature-Erkennung vorgesehen. 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 zur Feature-Erkennung gedacht.

Document.fragmentDirective

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

CSS

::target-text

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

Spezifikationen

Browser-Kompatibilität

html.elements.a.text_fragments

api.FragmentDirective

css.selectors.target-text

Siehe auch

• Kühn dort verlinken, wo noch niemand zuvor verlinkt hat: Textfragmente