- Die CSS Custom Highlight API ermöglicht es Entwicklern, bestimmte Textabschnitte zu formatieren, ohne die DOM-Struktur zu verändern.
- Durch die Kombination von Range- und Highlight-Objekten mit der HighlightRegistry können benutzerdefinierte visuelle Markierungen programmatisch angewendet werden.
- Das Pseudo-Element ::highlight() bietet eine spezielle CSS-Schnittstelle, um registrierte Hervorhebungen unabhängig voneinander zu gestalten.
- Dieser Ansatz optimiert die Leistung, indem er das DOM-Gewicht reduziert und die mit dem Einfügen von Wrapper-Elementen verbundenen Layoutverschiebungen vermeidet.
Haben Sie jemals die Frustration verspürt, bestimmte Wörter auf einer Seite markieren zu wollen und festzustellen, dass Sie alles in eine Million Wörter einbetten müssen? <span> or <mark> Tags? Das ist ein absoluter Albtraum für die Performance und kann dein CSS-Layout komplett durcheinanderbringen. Tja, genau da kommt das ins Spiel. API für benutzerdefinierte CSS-Hervorhebungen kommt ins Spiel und wirkt als Wendepunkt für alle, die Text dynamisch hervorheben müssen, ohne die eigentliche HTML-Struktur zu verändern.
Im Wesentlichen erweitert diese API Dinge, die wir bereits kennen, wie zum Beispiel ::selection or ::spelling-errorAber es gibt uns die Schlüssel zum Königreich. Anstatt uns darauf zu verlassen, dass der Browser entscheidet, was hervorgehoben wird, Sie können nun beliebige Textbereiche definieren. Und Sie können sie nach Belieben gestalten. Es ist eine wesentlich elegantere Methode, um Dinge wie Suchergebnisse, gemeinsames Bearbeiten oder Syntaxhervorhebung zu handhaben, ohne das DOM unnötig zu vergrößern.
Warum sollte man vom Markenelement abrücken?
Für eine lange Zeit hat die <mark> Das <code><p></code>-Tag war die erste Wahl, um Text hervorzuheben. Obwohl es für grundlegende Semantik hervorragend geeignet ist, hat es einige ziemlich ärgerliche Einschränkungen. Zum Beispiel… Das Einfügen von Knoten in das DOM kann aufwändige Layout-Neuberechnungen auslösen.Das kann dazu führen, dass Ihre Website träge wirkt, insbesondere bei Animationen. Die eigentlichen Probleme beginnen jedoch erst, wenn Sie Text hervorheben müssen, der erstreckt sich über mehrere HTML-ElementeDa man ein Tag nicht einfach offen lassen und es innerhalb eines anderen Elements schließen kann, ohne ungültiges HTML zu erzeugen, ist man gezwungen, die Hervorhebung in mehrere kleine Teile zu zerlegen, was einfach umständlich ist.
Die Kernkonzepte der API
Damit das funktioniert, müssen Sie sich mit einigen bestimmten Objekten vertraut machen. Zunächst einmal gibt es da das/die/den BereichsobjektDas ist im Grunde ein Zeiger, der innerhalb des Dokuments angibt: „Hier beginnen und dort enden“. Dann haben wir noch den Objekt hervorheben, das eine oder mehrere dieser Produktreihen zusammenfasst, sodass sie als eine einzige Stilgruppe behandelt werden können. Alle diese werden von der HighlightRegistry (Zugriff über CSS.highlights), das wie eine Karte funktioniert, auf der Sie Ihre Highlights unter einem eindeutigen Namen registrieren.
Schrittweise Umsetzung
Einen benutzerdefinierten Highlight-Bereich auf dem Bildschirm zu erstellen, ist ganz einfach und besteht aus vier Schritten. Zuerst… Erstellen Sie Ihre Range-Objekte in JavaScript. Dies kann man erreichen, indem man einen Textknoten identifiziert und Methoden wie die folgenden verwendet: setStart und setEnd Um genau festzulegen, welche Zeichen Sie ansprechen möchten. Wenn Sie ein ganzes Element abdecken müssen, setStartBefore und setEndAfter sind deine besten Freunde.
Sobald der Bereich festgelegt ist, besteht der zweite Schritt darin, Ein neues Highlight-Objekt instanziierenEine praktische Funktion hierbei ist, dass eine einzelne Hervorhebung mehrere Bereiche enthalten kann. Dies ist ideal für eine „Suchen auf der Seite“-Funktion, bei der jedes Vorkommen eines Wortes die gleiche Farbe haben soll. Danach können Sie Highlights speichern mit automatisierten CSS.highlights.set('my-name', highlight)Dadurch erhält Ihr Hervorhebungselement eine benutzerdefinierte Kennung, die die CSS-Engine tatsächlich erkennen kann.
Den letzten Schliff gibt das Styling. Sie verwenden dazu den/die/das ::highlight(my-name) Pseudoelement in Ihrer CSS-Datei. Da es sich hierbei nicht um ein Standardelement handelt, sind Sie auf wenige Eigenschaften beschränkt, können diese aber problemlos ändern. Hintergrundfarbe oder Textdekoration Um diese Bereiche hervorzuheben, könnte man beispielsweise einen leuchtend gelben Hintergrund für Suchergebnisse oder eine Durchstreichung für gelöschten Text in einem kollaborativen Editor verwenden.
Erweiterte Nutzungs- und Leistungsvorteile
Einer der beeindruckendsten Anwendungsfälle ist die Syntaxhervorhebung für Code . Traditionell fügten Bibliotheken wie Prism.js Tausende von Spans ein, um Tokens farbig hervorzuheben, was das DOM enorm aufblähen konnte. Mit der Custom Highlight API lässt sich der Code in JavaScript tokenisieren und Stile anwenden, ohne ein einziges Element zur Seite hinzuzufügen . Dadurch bleibt das DOM schlank und der Browser wird nicht durch große Dokumente überlastet.
Wenn Sie die Hervorhebung spontan ändern müssen, müssen Sie nicht von vorne beginnen. Da das Hervorhebungsobjekt mit dem Bereich verknüpft ist, einfache Aktualisierung der Grenzen des Untersuchungsgebiets Die visuelle Hervorhebung auf dem Bildschirm wird automatisch aktualisiert. Wenn Sie sie entfernen möchten, können Sie entweder einen bestimmten Bereich mithilfe der Funktion entfernen. delete Methode des Highlight-Objekts oder Die gesamte Registrierung löschen mit automatisierten CSS.highlights.delete.
Barrierefreiheit und Browserunterstützung
Es ist wichtig zu beachten, dass diese Highlights rein visueller Natur sind und Sie liefern keine inhärente semantische Bedeutung für Bildschirmleseprogramme. Wenn Sie etwas entwickeln, bei dem Barrierefreiheit höchste Priorität hat, sollten Sie die type Ein Attribut der Highlight-Schnittstelle, mit dem angegeben werden kann, ob es sich bei der Hervorhebung um einen Rechtschreib- oder Grammatikfehler handelt. Die Unterstützung hierfür ist jedoch unterschiedlich. Im Zweifelsfall Ergänzen Sie Ihre Highlights mit ARIA-Labels Oder semantisches HTML ist der richtige Weg.
Was die Kompatibilität angeht, hat diese API in letzter Zeit einen enormen Aufschwung erlebt. Sie läuft bereits stabil in Chrome, Edge und Safari, und Firefox unterstützt sie seit etwa Version 140, wodurch sie für die meisten Produktionsumgebungen geeignet ist. Um Abstürze in älteren Browsern zu vermeiden, empfiehlt es sich, vor der Ausführung des Codes zu prüfen, ob das CSS-Objekt die Eigenschaft „highlights“ enthält.
Diese API revolutioniert die Textmanipulation, indem sie die visuelle Darstellung von der HTML-Struktur entkoppelt. Durch die Nutzung von Range- und Highlight-Objekten können Entwickler komplexe Funktionen wie Echtzeitsuche und Syntaxhervorhebung implementieren und gleichzeitig das DOM schlank und die Performance hoch halten. So werden die herkömmlichen Einschränkungen von Wrapper-Elementen effektiv umgangen.
