Das ModulCSS Custom Highlight API bietet eine programmatische Möglichkeit, bestimmte Textbereiche, die durchRange-Objekte definiert sind, gezielt anzusprechen, ohne die zugrunde liegende DOM-Struktur zu beeinflussen. DieRange-Objekte können dann über::highlight() Pseudo-Elemente ausgewählt und mit Hervorhebungsstilen versehen oder diese entfernt werden. Die Funktionen dieses Moduls ermöglichen Hervorhebungseffekte ähnlich wie bei Texteditoren, die Rechtschreib- oder Grammatikfehler hervorheben, und Code-Editoren, die Syntaxfehler markieren.

Die CSS Custom Highlight API erweitert das Konzept anderer Hervorhebungs-Pseudo-Elemente wie::selection,::spelling-error,::grammar-error, und::target-text durch die Bereitstellung einer Möglichkeit, beliebige Textranges zu erstellen (definiert alsRange-Objekte in JavaScript) und diese über CSS zu stylen, anstatt auf durch den Browser definierte Ranges beschränkt zu sein.

Custom Highlight API in Aktion

Um das Stylen von Textranges auf einer Webseite mithilfe der CSS Custom Highlight API zu ermöglichen, erstellen Sie einRange-Objekt und anschließend einHighlight-Objekt für denRange. Nach der Registrierung der Hervorhebung mit der MethodeHighlightRegistry.set() können Sie den Range dann mit dem::highlight() Pseudo-Element auswählen. Der imset()-Methode definierte Name wird als Parameter des::highlight() Pseudo-Element Selektors verwendet, um diesen Range auszuwählen. Der durch das::highlight() Pseudo-Element ausgewählte Range kann mit einerbegrenzten Anzahl von Eigenschaften gestylt werden.

<h1>Directions</h1><h2>Lincoln Memorial to Martin Luther King, Jr. Memorial</h2><ol><li>Head south on Lincoln Memorial Circle</li  ><li>Turn right toward Independence Ave</li  ><li>Turn left onto Independence Ave</li  ><li>Turn right onto West Basin Dr</li  ><li>Look up when you reach 64 Independence Ave!</li></ol><hr /><label  >Number of steps completed:  <input type="number" min="0" max="5" value="0" /></label>

Dieses Beispiel verwendet die Eigenschafttext-decoration, um densteps-Hervorhebungsbereich, der durch unser JavaScript definiert ist, durchzustreichen:

::highlight(steps) {  text-decoration: line-through;  color: blue;}

Wir erstellen einenRange mit einem Start- und Endknoten (was in diesem Fall derselbe Knoten ist). Wir setzen diesen Range dann alsHighlight mithilfe derset()-Methode der CSSHighlightRegistry-Schnittstelle.

const rangeToHighlight = new Range();const list = document.querySelector("ol");rangeToHighlight.setStart(list, 0);rangeToHighlight.setEnd(list, 0);CSS.highlights.set("steps", new Highlight(rangeToHighlight));

Ein Ereignislistener aktualisiert das Ende des hervorgehobenen Bereichs, wenn sich die Anzahl der abgeschlossenen Schritte ändert:

const currentPositionSlider = document.querySelector("input");currentPositionSlider.addEventListener("change", (e) => {  rangeToHighlight.setEnd(list, e.target.value);});

Referenz

Pseudo-Elemente

• ::highlight()

Schnittstellen

• Highlight
• HighlightRegistry

Schnittstellenerweiterungen

Dieses Modul fügt Schnittstellen, die in anderen Spezifikationen definiert sind, Eigenschaften und Methoden hinzu.

• CSS
  • CSS.highlights

Leitfäden

CSS Custom Highlight API

Die Konzepte und Verwendung der CSS Custom Highlight API, einschließlich der Erstellung vonRange undHighlight-Objekten, der Registrierung der Hervorhebungen mithilfe derHighlightRegistry und dem Stylen der Hervorhebungen mithilfe des::highlight() Pseudo-Elements.

Verwandte Konzepte

• ::grammar-error
• ::selection
• ::spelling-error
• ::target-text
• Range Schnittstelle undRange() Konstruktor
• Textfragmente
• FragmentDirective Schnittstelle

Spezifikationen

Siehe auch

• CSS-Pseudo-Element-Modul
• CSS-Objektmodell (CSSOM) APIs