CSS CUSTOM HIGHLIGHT API

DOMを変えずに、検索語をハイライト

同じ検索結果を、<mark>を追加する方法とCustom Highlight APIで比べます。

対応状況を確認中
01

SEARCH THE TEXT

検索語を入力

LIVE COMPARISON

見た目は同じ、DOMへの影響が違う

“CSS”
BEFORE

DOM wrapping

3 mark elements
DOM <p><mark>CSS</mark>…</p> CHANGED
AFTER

Custom Highlight API

0 elements added

CSS Custom Highlight APIを使うと、検索語を装飾するためだけの要素をDOMへ追加せずに済みます。

JavaScriptで一致箇所のRangeを作り、CSS.highlightsへ登録します。見た目はCSSの::highlight()で定義できます。

DOM <p>CSS Custom Highlight API…</p> UNCHANGED

CORE CODE

ハイライトの登録と装飾