Intelligenter als Ctrl+F: Direkt auf Inhalte in einer Webseite verlinken

• Text Fragments sind eine leistungsstarke Web-Plattform-Funktion, mit der sich präzise auf bestimmten Text innerhalb einer Webseite verlinken lässt, ohne zusätzliche Anker einzufügen
• Diese Funktion wird durch das CSS-Pseudoelement ::target-text ergänzt, das eine Möglichkeit bietet, den Stil des hervorgehobenen Textes anzupassen
• Grundsyntax einer Text-Fragment-URL:
  • https://example.com/page.html/…]
• Füge nach dem Hash-Zeichen die spezielle Syntax :~: hinzu und nach text= Folgendes:
  1. prefix-: Eine Textzeichenfolge, die direkt vor dem verlinkten Text stehen muss. Wenn es mehrere Treffer gibt, hilft sie dem Browser, auf den richtigen Text zu verlinken. Dieser Teil wird nicht hervorgehoben
  2. textStart: Der Beginn des hervorzuhebenden Textes
  3. textEnd: Das Ende des hervorzuhebenden Textes
  4. -suffix: Funktioniert ähnlich wie prefix-, aber mit einer nachfolgenden Textzeichenfolge hinter dem Text. Nützlich bei mehreren Treffern und wird zusammen mit dem verlinkten Text nicht hervorgehoben
• Wenn der Browser Text Fragments unterstützt, kann mit dem Pseudoelement ::target-text der Stil des hervorgehobenen Textes geändert werden
  • ::target-text { background-color: yellow; }
• Nur die folgenden Eigenschaften können geändert werden:
  • color
  • background-color
  • text-decoration und zugehörige Eigenschaften
  • text-shadow
  • stroke-color, fill-color, stroke-width
  • benutzerdefinierte Eigenschaften
• Browser-Unterstützung und Fallback-Verhalten
  • Text Fragments werden derzeit von allen Browsern unterstützt
  • Das Pseudoelement ::target-text wird in Safari noch nicht unterstützt, ist aber in der Technology Preview-Version verfügbar
  • Wenn der Browser diese Funktion nicht unterstützt, wird die Seite ohne Texthervorhebung oder Scrollen geladen
  • Das Standard-Styling der Hervorhebung unterscheidet sich je nach Browser
• Abschließende Gedanken
  • Zunächst dachte ich, Text Fragments seien eine nur für Chrome verfügbare Funktion, stellte dann aber fest, dass sie tatsächlich auf offenen Web-Standards basieren, die in allen Browsern implementiert werden können
  • Ich hoffe, dass diese Funktion breiter genutzt wird, insbesondere in vertrauenswürdigen generativen KI-Systemen
  • Es wäre schön, wenn alle Nutzer Text Fragments einfach verwenden könnten
• Update
  • Chromium-basierte Browser haben bereits eine integrierte Funktion zum Erzeugen eines Links auf bestimmten Text
  • Wenn du Chrome verwendest, kannst du Text markieren und mit der rechten Maustaste klicken; im Kontextmenü findest du dann die Option "Link zur Hervorhebung kopieren"

[plorrr]

Das habe ich gelegentlich bei der Google-Suche gesehen – also ist es das.

[siisee11]

Ach so, das ist also die Funktion, mit der in Arc Browser ein Link zu Text kopiert wird..!

[galadbran]

Im Edge-Browser gibt es im Rechtsklick-Kontextmenü nach dem Markieren von Text den Eintrag „Copy link to highlight“. Durch diese Funktion habe ich überhaupt erst erfahren, dass es so eine Spezifikation gibt.

[galadbran]

In Firefox verwende ich dafür die Erweiterung https://github.com/ichaoX/ext-textFragment .

[joyfui]

Oh, tolle Erweiterung, danke.

[huiya]

Oh, das ist ja interessant.

[secret3056]

So eine Funktion … je mehr man über die Welt der Browser weiß, desto mehr merkt man, was es da alles gibt.

https://de.news.hada.io/topic?id=17474#:~:text=am%20Anfang,Erkenntnis