Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
その他 Limited support

Custom highlights

CSS Custom Highlight APIを使用すると、JavaScriptでテキスト範囲を定義し、::highlight()疑似要素でスタイルを適用できます。検索結果のハイライト、コードエディタの構文強調、スペルチェックの下線表示など、DOM構造を変更せずにテキストを装飾できます。パフォーマンスの観点からも優れた手法です。

ハイライトテキスト装飾

概要

CSS Custom Highlight APIを使用すると、JavaScriptでテキスト範囲を定義し、::highlight()疑似要素でスタイルを適用できます。検索結果のハイライト、コードエディタの構文強調、スペルチェックの下線表示など、DOM構造を変更せずにテキストを装飾できます。パフォーマンスの観点からも優れた手法です。

対応ブラウザ

デスクトップ

Chrome 105+
Edge 105+
Safari 17.2+
Firefox 未対応

モバイル

Chrome Android 105+
Safari iOS 17.2+
Firefox Android 未対応

基本構文

CSS 
::highlight(search-result) {
  background-color: #ffeb3b;
  color: black;
}
::highlight(spelling-error) {
  text-decoration: wavy underline red;
}

実務での使いどころ

  • 検索結果のハイライト表示

    ページ内検索の結果をDOM構造を変えずにハイライトし、パフォーマンスを維持しながら視覚的フィードバックを提供します。

注意点

  • Firefoxでは2026年3月時点で未サポートです。また、::highlight()で適用できるプロパティは限定されています。

アクセシビリティ

  • ハイライトのカラーコントラスト比がWCAGの基準を満たしていることを確認し、色のみに依存しないUI設計を心がけてください。

参考リンク