Custom Highlight API | CSS Baseline Tour 2026

検索校正

CSS Custom Highlight API を使うと、テキストの任意の範囲に色を付けられます。

従来は <mark> や <span> で文字を囲む必要があり、DOMを書き換えていました。この方法では DOM は変わらず、CSS で見た目だけを指定します。

検索結果の強調、エディタの色分け、校正ツールの指摘など、CSS とJavaScript を組み合わせたさまざまな表現に使えます。

文章を書き換えると、指摘が更新されます。

新しいサーバを導入する事で、処理を高速化する事が出来る。

設定ファイルを確認して下さい。サーバーの再起動は不要です。

使っている機能

new Highlight(): テキストの範囲（Range）をまとめて持つオブジェクト
CSS.highlights.set(): ハイライトに名前を付けて登録する。CSSからはこの名前で指定する
::highlight(): 登録した名前のハイライトに、色や背景色などの見た目を指定する疑似要素

CSS

/* "search" という名前で登録したハイライトの見た目 */
::highlight(search) {
	background-color: #fde047;
	color: black;
}

JavaScript

const highlight = new Highlight();
CSS.highlights.set('search', highlight);

// 一致した範囲を Range で表し、ハイライトに追加する。DOMは変更しない
const range = new Range();
range.setStart(node, i);
range.setEnd(node, i + query.length);
highlight.add(range);

使っている機能

::highlight(): 見つけた範囲に下線を付ける。色や背景だけでなく text-decoration も指定できる
text-decoration-line: spelling-error: ブラウザ標準のスペルミスと同じ波線を引く（Baseline 2025）。grammar-error は文法ミスの波線

CSS

/* ブラウザ標準のスペルミス・文法ミスと同じ波線を使う */
::highlight(lint-error) {
	text-decoration-line: spelling-error;
}

::highlight(lint-warning) {
	text-decoration-line: grammar-error;
}

JavaScript

const highlights = {
	'lint-error': new Highlight(),
	'lint-warning': new Highlight(),
};
CSS.highlights.set('lint-error', highlights['lint-error']);
CSS.highlights.set('lint-warning', highlights['lint-warning']);