CSS Custom Highlight API

Das Modul CSS Custom Highlight API bietet eine programmatische Möglichkeit, spezifische Textbereiche zu targetieren, die durch Range-Objekte definiert sind, ohne die zugrunde liegende DOM-Struktur zu beeinflussen. Die Range-Objekte können dann über ::highlight() Pseudoelemente ausgewählt werden, und es können Hervorhebungsstile hinzugefügt und entfernt werden. Die Funktionen dieses Moduls können Hervorhebungseffekte erzeugen, die ähnlich sind wie die Art und Weise, wie Texteditoren Rechtschreib- oder Grammatikfehler hervorheben und Code-Editoren Syntaxfehler anzeigen.

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

Custom Highlight API in Aktion

Um Textbereiche auf einer Webseite mit der CSS Custom Highlight API zu stylen, erstellen Sie ein Range Objekt und dann ein Highlight Objekt für den Range. Nachdem Sie die Hervorhebung mit der Methode HighlightRegistry.set() registriert haben, können Sie den Bereich mit dem ::highlight() Pseudoelement auswählen. Der im 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 Eigenschaft text-decoration, um den steps Highlight-Bereich zu durchstreichen, der durch unser JavaScript definiert wird:

css

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

Wir erstellen ein Range mit einem Start- und Endknoten (welcher in diesem Fall derselbe Knoten ist). Dann setzen wir 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

Schnittstellenerweiterungen

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

CSS
- CSS.highlights

Leitfäden

CSS Custom Highlight API: Die Konzepte und die Verwendung der CSS Custom Highlight API, einschließlich der Erstellung von Range- und Highlight-Objekten, der Registrierung der Hervorhebungen mit der HighlightRegistry und der Gestaltung der Hervorhebungen mit dem ::highlight() Pseudoelement.

Spezifikationen

Spezifikation
CSS Custom Highlight API Module Level 1

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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