CSS: highlights 静的プロパティ

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

highlights は CSS インターフェイスは静的な読み取り専用プロパティであり、interface は、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

ブラウザーの互換性

BCD tables only load in the browser

関連情報