CSS Custom Highlight API

Das CSS Custom Highlight API-Modul bietet eine programmatische Möglichkeit, bestimmte Textbereiche, die durch Range-Objekte definiert sind, zu markieren, ohne die zugrundeliegende DOM-Struktur zu beeinflussen. Diese Range-Objekte können anschließend über ::highlight() Pseudoelemente ausgewählt werden, wobei Hervorhebungsstile hinzugefügt und entfernt werden können. Die Funktionen dieses Moduls können Hervorhebungseffekte ähnlich wie bei Texteditoren, die Rechtschreib- oder Grammatikfehler markieren, und Code-Editoren, die Syntaxfehler hervorheben, erzeugen.

Das CSS Custom Highlight API erweitert das Konzept anderer Hervorhebungs-Pseudoelemente wie ::selection, ::spelling-error, ::grammar-error und ::target-text. Es bietet eine Möglichkeit, beliebige Textbereiche (definiert als Range-Objekte in JavaScript) zu erstellen und diese über CSS zu stylen, anstatt auf von Browsern definierte Bereiche beschränkt zu sein.

Custom Highlight API in Aktion

Um Styling von Textbereichen auf einer Webseite mit dem CSS Custom Highlight API zu ermöglichen, erstellen Sie ein Range-Objekt und anschließend ein Highlight-Objekt für den Bereich. Nachdem Sie die Hervorhebung mit der Methode HighlightRegistry.set() registriert haben, können Sie den Bereich mit dem ::highlight() Pseudoelement auswählen. Der in der set()-Methode definierte Name wird als Parameter des ::highlight() Pseudoelementselectors verwendet, um diesen Bereich auszuwählen. Der Bereich, der durch das ::highlight() Pseudoelement ausgewählt wird, 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>

Dieses Beispiel verwendet die text-decoration-Eigenschaft, 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 (welches in diesem Fall derselbe Knoten ist). Wir setzen dann diesen Bereich als Highlight mit der set()-Methode der CSS HighlightRegistry-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 Event 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

Erweiterungen von Schnittstellen

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 die Nutzung des CSS Custom Highlight API, einschließlich der Erstellung von Range- und Highlight-Objekten, der Registrierung der Hervorhebungen mit dem HighlightRegistry und der Stylisierung 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