CSS: highlights 静的プロパティ
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.
highlights は CSS インターフェイスは静的な読み取り専用プロパティであり、CSS カスタムハイライト API を使用して任意のテキスト範囲をスタイル設定するために用いる HighlightRegistry へのアクセス手段を提供します。
値
HighlightRegistry オブジェクトです。
例
次の例は、複数のテキスト範囲を作成し、そのテキスト範囲に対して Highlight オブジェクトを作成し、このハイライトを HighlightRegistry に登録し、最後に ::highlight() 擬似要素を使用してテキスト範囲にスタイルを設定する例を示しています。
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;
}
仕様書
| Specification |
|---|
| CSS Custom Highlight API Module Level 1 # dom-css-highlights |