CSS Custom Highlight API

Das CSS Custom Highlight API Modul bietet eine programmgesteuerte Möglichkeit, bestimmte Textbereiche, die durch Range-Objekte definiert sind, zu markieren, ohne die zugrunde liegende DOM-Struktur zu beeinträchtigen. Die Range-Objekte können dann über ::highlight() Pseudoelemente ausgewählt werden, und Sie können Hervorhebungsstile hinzufügen und entfernen. Die Funktionen dieses Moduls können Hervorhebungseffekte erzeugen, ähnlich wie Texteditoren Rechtschreib- oder Grammatikfehler hervorheben oder Code-Editoren Syntaxfehler markieren.

Das CSS Custom Highlight API erweitert das Konzept anderer Highlight-Pseudoelemente wie ::selection, ::spelling-error, ::grammar-error und ::target-text durch die Möglichkeit, beliebige Textranges zu erstellen (definiert als Range Objekte in JavaScript) und diese über CSS zu stylen, anstatt auf browserdefinierte Ranges beschränkt zu sein.

Custom Highlight API in Aktion

Um die Hervorhebung von Textranges auf einer Webseite mit dem CSS Custom Highlight API zu ermöglichen, erstellen Sie ein Range Objekt und dann ein Highlight Objekt für den Bereich. Nach der Registrierung der Hervorhebung mit der HighlightRegistry.set() Methode können Sie den Bereich mit dem ::highlight() Pseudoelement auswählen. Der im set()-Methode definierte Name wird als Parameter des ::highlight() Pseudoelement-Selektors verwendet, um diesen Bereich auszuwählen. Der durch das ::highlight() Pseudoelement ausgewählte Bereich kann mit einer begrenzten 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" id="currentStep" />
</label>

In diesem Beispiel wird die text-decoration Eigenschaft verwendet, um den steps Hervorhebungsbereich, der durch unser JavaScript definiert ist, durchzustreichen:

css

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

Wir erstellen ein Range mit einem Start- und Endknoten (was in diesem Fall derselbe Knoten ist). Wir legen dieses Range dann als Highlight mit der set()-Methode des CSS HighlightRegistry Interface fest.

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 Ereignis-Listener 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

Pseudoelemente

::highlight()

Schnittstellen

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 Nutzung des CSS Custom Highlight API, einschließlich der Erstellung von Range und Highlight Objekten, der Registrierung der Hervorhebungen mit dem HighlightRegistry und der Gestaltung der Hervorhebungen mit dem ::highlight() Pseudoelement.

Spezifikationen

Specification
CSS Custom Highlight API Module Level 1

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden