CSS: `highlights` statische 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 der CSS-Schnittstelle ermöglicht den Zugriff auf das HighlightRegistry, das verwendet wird, um beliebige Textranges mit der CSS Custom Highlight API zu stylen.
Wert
Das HighlightRegistry-Objekt.
Beispiele
Das folgende Beispiel zeigt, wie mehrere Textranges erstellt werden, dann ein Highlight-Objekt für diese erstellt und dieses Highlight im HighlightRegistry registriert wird, um schließlich die Textranges mit dem ::highlight() Pseudo-Element zu stylen.
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
Loading…