::highlight()

Limited availability

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

::highlight() は CSS の擬似要素で、スタイルをカスタムハイライトに適用します。

カスタムハイライトは、 Range オブジェクトの集合であり、 HighlightRegistry を使用してウェブページに登録されます。

利用可能なプロパティ

特定の CSS プロパティだけが ::highlight() で利用できます。

特に、 background-image は無視されます。

構文

css
::highlight(custom-highlight-name)

例

文字をハイライト

HTML

html
<p id="rainbow-text">CSS カスタムハイライト API の虹</p>

CSS

css
#rainbow-text {
  font-family: monospace;
  font-size: 1.5rem;
}

::highlight(rainbow-color-1) {
  color: #ad26ad;
  text-decoration: underline;
}
::highlight(rainbow-color-2) {
  color: #5d0a99;
  text-decoration: underline;
}
::highlight(rainbow-color-3) {
  color: #0000ff;
  text-decoration: underline;
}
::highlight(rainbow-color-4) {
  color: #07c607;
  text-decoration: underline;
}
::highlight(rainbow-color-5) {
  color: #b3b308;
  text-decoration: underline;
}
::highlight(rainbow-color-6) {
  color: #ffa500;
  text-decoration: underline;
}
::highlight(rainbow-color-7) {
  color: #ff0000;
  text-decoration: underline;
}

JavaScript

js
const textNode = document.getElementById("rainbow-text").firstChild;

if (!CSS.highlights) {
  textNode.textContent =
    "このブラウザーは、 CSS カスタムハイライト API には対応していません。";
}

// 虹の各色ごとにハイライトを作成して登録
const highlights = [];
for (let i = 0; i < 7; i++) {
  // この色に対して新しいハイライトを作成
  const colorHighlight = new Highlight();
  highlights.push(colorHighlight);

  // このハイライトをカスタム名で登録
  CSS.highlights.set(`rainbow-color-${i + 1}`, colorHighlight);
}

// テキストを 1 文字ずつ反復処理
for (let i = 0; i < textNode.textContent.length; i++) {
  // この文字専用の新しい範囲を作成
  const range = new Range();
  range.setStart(textNode, i);
  range.setEnd(textNode, i + 1);

  // 次の利用できるハイライトに範囲を追加し、
  // 7 番目に達したら最初のハイライトに戻る
  highlights[i % 7].add(range);
}

結果

仕様書

Specification
CSS Custom Highlight API Module Level 1
# custom-highlight-pseudo
CSS Pseudo-Elements Module Level 4
# selectordef-highlight-custom-ident

ブラウザーの互換性

関連情報