Textfragmente

Historisch gesehen war eine der Hauptfunktionen des Webs immer die Fähigkeit, Links zwischen verschiedenen Dokumenten bereitzustellen — das macht das Web zu einem Web:

• Sie können einen Link oben in einem Dokument setzen, indem Sie auf seine URL verlinken, zum Beispiel:
  • https://developer.mozilla.org/de/docs/Web/HTML/Element/a.
• Sie können auf einen bestimmten Abschnitt eines Dokuments verlinken, indem Sie auf seine URL plus das Dokumentfragment (ID) dieses Abschnitts verlinken, zum Beispiel:
  • https://developer.mozilla.org/de/docs/Web/HTML/Element/a#browser_compatibility.

Das Problem beim Verlinken auf spezifische Dokumentfragmente besteht darin, dass der Autor der verlinkten Seite eine Anker setzen muss, um tatsächlich darauf verlinken zu können. Das zweite Beispiel oben verlinkt ein h2-Element mit einer ID von 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 einfach nur zur Oberseite der Seite. Dies ist im Sinne der schrittweisen Degradation vernünftig, aber es wäre wohl besser, wenn der Urheber des Links die volle Kontrolle darüber hätte, wohin sie verlinken, ohne auf den Seitenautor angewiesen zu sein.

Textfragmente machen dies zur Realität — sie ermöglichen es Linkautoren, den Textinhalt anzugeben, zu dem sie verlinken möchten, anstatt Dokumentfragmenten auf flexible Weise.

Ähnlich wie Dokumentfragmente 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 wichtigsten Teile, die Sie verstehen müssen, sind wie folgt:

:~:

Auch bekannt als das Fragment-Direktiv, diese Zeichensequenz teilt dem Browser mit, dass das, was als nächstes kommt, eine oder mehrere User-Agent-Anweisungen sind, die während des Ladens aus der URL entfernt werden, sodass Autorenskripte nicht direkt mit ihnen interagieren können. User-Agent-Anweisungen werden auch als Direktiven bezeichnet.

text=

Eine Text-Direktive. Dies stellt dem Browser ein Textfragment zur Verfügung, das definiert, zu welchem Text im verlinkten Dokument verlinkt werden soll.

textStart

Eine Textzeichenfolge, die den Beginn des verlinkten Textes angibt.

textEnd Optional

Eine Textzeichenfolge, die das Ende des verlinkten Textes angibt.

prefix- Optional

Eine Textzeichenfolge, gefolgt von einem Bindestrich, gibt an, welcher Text dem verlinkten Text unmittelbar vorausgehen soll, wobei nur Leerzeichen dazwischen erlaubt sind. Dies hilft dem Browser, den richtigen verlinkten Text auszuwählen, falls es mehrere Übereinstimmungen gibt.

-suffix Optional

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

Unterstützende Browser scrollen zu und markieren das erste Textfragment im verlinkten Dokument, das der angegebenen Direktive entspricht. Beachten Sie, dass es möglich ist, mehrere Textfragmente im selben URL zu spezifizieren, indem sie mit einem Kaufmännischen Und-Zeichen (&) getrennt werden.

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

• Übereinstimmungen sind nicht groß-/kleinschreibungssensitiv.

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

• Aus Sicherheitsgründen erfordert das Feature, 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 dieses Feature nutzen.

• Textfragmente werden nur bei benutzerinitiierten Navigationen aufgerufen.

• Textfragmente werden nur auf den Hauptframe angewendet; Text wird nicht innerhalb von <iframe>s gesucht, 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 User Agents keine Textfragmente verarbeiten:

  httpCopy to Clipboard

  Document-Policy: force-load-at-top
  

• https://example.com#:~:text=for scrollt zu und markiert das erste Vorkommen des Textes for im Dokument.
• https://developer.mozilla.org/de/docs/Web/HTML/Element/a#:~:text=human scrollt zu und markiert das erste Vorkommen des Textes human im Dokument.
• https://developer.mozilla.org/de/docs/Web/HTML/Element/a#:~:text=linked%20URL scrollt zu und markiert das erste Vorkommen des Textes linked URL im Dokument.

• https://developer.mozilla.org/de/docs/Web/HTML/Element/a#:~:text=human,URL scrollt zu und markiert die erste Instanz einer Textzeichenkette, die mit human beginnt und mit URL endet.
• https://developer.mozilla.org/de/docs/Web/HTML/Element/a#:~:text=linked%20URL,defining%20a%20value scrollt zu und markiert die erste Instanz einer Textzeichenkette, die mit linked URL beginnt und mit defining a value endet. Beachten Sie, wie der markierte Text mehrere Blocklevel-Elemente überspannt.

• https://example.com#:~:text=asking-,for scrollt zu und markiert die zweite Instanz des Textes for im Dokument.
• https://developer.mozilla.org/de/docs/Web/HTML/Element/a#:~:text=sent-,referrer scrollt zu und markiert die erste Instanz des Textes referrer, die den Text sent direkt davor hat. Dies ist die 5. Instanz von referrer im Dokument; ohne das Prefix würde die erste Instanz markiert werden.
• https://developer.mozilla.org/de/docs/Web/HTML/Element/a#:~:text=linked%20URL,-'s%20format scrollt zu und markiert die erste Instanz des Textes linked URL, der den Text 's format direkt danach hat. Dies ist die 5. Instanz von linked URL im Dokument; ohne das Suffix würde die erste Instanz markiert werden.
• https://developer.mozilla.org/de/docs/Web/HTML/Element/a#:~:text=downgrade:-,The%20Referer,be%20sent,-to%20origins scrollt zu und markiert die Instanz des Textes The Referer ... be sent, die von downgrade: eingeleitet und von to origins abgeschlossen wird. Dies zeigt ein komplexeres Beispiel, bei dem Prefix/Suffix verwendet werden, um die spezifische Textinstanz zu finden, auf die Sie verlinken möchten. Versuchen Sie, das Prefix zu entfernen und sehen Sie, was übereinstimmt.

Sie können mehrere Textfragmente spezifizieren, die im selben URL markiert werden, indem sie mit Kaufmännischen Und-Zeichen (&) getrennt werden. Schauen wir uns ein paar Beispiele an:

• https://developer.mozilla.org/de/docs/Web/HTML/Element/a#:~:text=Causes&text=linked scrollt zu und markiert die ersten Instanzen der Textzeichenfolgen Causes und linked.
• https://developer.mozilla.org/de/docs/Web/HTML/Element/a#:~:text=linked%20URL,-'s%20format&text=Deprecated-,attributes,attribute scrollt zu und markiert zwei Textinstanzen:
  • Die erste Instanz des Textes linked URL, der den Text 's format direkt danach hat.
  • Die erste Instanz einer Textzeichenkette, die mit attributes beginnt und mit attribute endet, wobei sie von Deprecated eingeleitet wird.

Wenn Sie eines oder mehrere Ihrer Textfragmente nicht markiert sehen und sicher sind, dass Sie die Syntax richtig haben, könnte es sein, dass Sie eine andere Instanz markieren als die, die Sie erwartet haben. Es könnte markiert sein, aber ausserhalb des Bildschirms.

Browser sind frei, den markierten Text auf beliebige Weise zu gestalten. Das CSS Pseudo-Elements Module Level 4 definiert ein Pseudo-Element, ::target-text, das es Ihnen erlaubt, das Styling anzupassen.

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

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

Versuchen Sie, den obigen Link in einem unterstützenden Browser zu öffnen, 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 Entwicklertools eines unterstützenden Browsers auszuführen, in einem Tab mit einem oder mehreren passenden Textfragmenten:

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

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

FragmentDirective

Ein Objekt, das die Textfragmente darstellt. Derzeit leer und hauptsächlich für die Feature-Erkennung vorgesehen.

Document.fragmentDirective

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

::target-text

Stellt die markierten Textfragmente im aktuellen Dokument dar. Es erlaubt Autoren, das Styling von Textfragmenten anzupassen.

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