CSS: highlights Static-Eigenschaft

Baseline 2025
Newly available

Since June 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die statische, schreibgeschützte highlights-Eigenschaft des CSS-Interfaces ermöglicht den Zugriff auf das HighlightRegistry, das verwendet wird, um beliebige Textbereiche mit der CSS Custom Highlight API zu stylen.

Wert

Das HighlightRegistry-Objekt.

Beispiele

Das folgende Beispiel zeigt, wie mehrere Textbereiche erstellt, dann ein Highlight-Objekt für diese Bereiche erstellt, dieses Highlight im HighlightRegistry registriert und schließlich die Textbereiche mit dem ::highlight()-Pseudo-Element gestylt werden.

js
const parentNode = document.getElementById("foo");

const range1 = new Range();
range1.setStart(parentNode, 10);
range1.setEnd(parentNode, 20);

const range2 = new Range();
range2.setStart(parentNode, 40);
range2.setEnd(parentNode, 60);

const myCustomHighlight = new Highlight(range1, range2);

CSS.highlights.set("my-custom-highlight", myCustomHighlight);
css
::highlight(my-custom-highlight) {
  background-color: yellow;
  color: black;
}

Spezifikationen

Specification
CSS Custom Highlight API Module Level 1
# dom-css-highlights

Browser-Kompatibilität

Siehe auch