CSS: highlights 静的プロパティ
Baseline
2025
最近利用可能
June 2025以降、この機能は最新のバージョンの端末およびブラウザーで動作します。古い端末やブラウザーでは動作しないことがあります。
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;
}
仕様書
| 仕様書 |
|---|
| CSS Custom Highlight API Module Level 1 # dom-css-highlights |