Chrome 144で::search-textが実装され、CSSの「ハイライト疑似要素(Highlight Pseudo-elements)」の種類がさらに増えました。ページ内検索結果やURLフラグメントによるハイライトなど、目的が異なるテキスト強調をどのように区別し、スタイルすべきかお困りではありませんか？本記事では、すべてのハイライト疑似要素を比較対照し、実務で即活用できるスタイリング技法を紹介します。詳細はCSS-Tricksの関連記事を基にしています。

Web development code on a screen Software Concept Art

ハイライト疑似要素 比較表

各疑似要素が選択する対象と注意点を表にまとめました。

疑似セレクタ選択対象備考
::search-textページ内検索(Ctrl/Cmd+F)の一致結果::search-text:currentは現在フォーカスされた結果を選択
::target-textURLテキストフラグメントで強調されたテキスト検索エンジン等からの外部リンクで主に使用
::selectionユーザーがマウス/ポインタで選択したテキスト
::highlight()JavaScriptのCustom Highlight APIで定義されたカスタムハイライト
::spelling-errorスペルミスの単語 (主に編集可能コンテンツ)
::grammar-error文法誤りの部分 (主に編集可能コンテンツ)

<mark>HTML要素も同様の役割を持ちますが、疑似要素ではありません。特に::search-textと::target-textは混同しやすいので、発生原因とコンテキストが異なる点を覚えておきましょう。

Laptop displaying CSS code Programming Illustration

相対色構文によるアクセシブルなハイライト作成

デフォルトのハイライト色（例：::search-textの黄色）が背景色とのコントラスト不足で可読性を損なう場合、どうすればよいでしょうか？CSSの相対色構文(Relative Color Syntax)を使用すると、背景色に応じた反転色を自動生成でき、アクセシビリティとユーザビリティを両立できます。

body {
  --background: #38003c;
  background: var(--background);
}

::selection,
::target-text,
::search-text {
  /* 文字色を背景色と同じに */
  color: var(--background);
  /* 背景色をRGBに変換後、各チャネル値を(255 - チャネル値)で反転 */
  background: rgb(from var(--background) calc(255 - r) calc(255 - g) calc(255 - b));
}

上記のコードは、--background変数の色を基にハイライト背景色を完全に反転させます。これにより、どのような背景色の上でもハイライトが目立つようになります。ただし、#808080のように反転しても同じ色になるケースは、別途コントラストを確認する必要があります。

各ハイライトを視覚的に区別する

複数のハイライトが重なる場合に備え、それぞれを少しずつ異なるスタイルにすることが推奨されます。以下の例は、RGBチャネルのうち1つを反転から除外して色を変化させる方法です。

::selection {
  /* Rチャネルはそのまま、GとBチャネルのみ反転 */
  background: rgb(from var(--background) r calc(255 - g) calc(255 - b) / 70%);
}
::target-text {
  /* Gチャネルはそのまま、RとBチャネルのみ反転 */
  background: rgb(from var(--background) calc(255 - r) g calc(255 - b) / 70%);
}
::search-text {
  /* Bチャネルはそのまま、RとGチャネルのみ反転 */
  background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 70%);
}
::search-text:current {
  /* 現在の検索結果は透明度なしでより濃く */
  background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 100%);
}

Keyboard with colorful keycaps Algorithm Concept Visual

まとめ：実装時の考慮点

ハイライトスタイリングの究極の目的は、ユーザーが必要な情報を素早く見つけ、区別できるようにすることです。したがって、デザインの統一性のために色を似せるよりも、機能的な要素として明確に目立たせる方が重要である場合があります。

  1. 常にコントラストを検証する: 相対色構文が自動的に解決してくれるわけではありません。#808080のような特殊なケースを含め、開発者ツールのアクセシビリティチェック機能やColor Contrast Analyzerで必ず確認してください。
  2. 意味に合った視覚的区別: ::spelling-errorは赤い下線、::grammar-errorは緑の下線のように、プラットフォームの慣習に従うことはユーザーの予測を裏切らない方法です。
  3. 将来の技術に期待する: CSS Color Module Level 5のcontrast-color()関数が実装されれば、背景色に対する最適な前景色を自動選択できるようになり、さらに便利になるでしょう。

新しい::search-textをきっかけに、ハイライト疑似要素への理解と適切なスタイリングは、モダンなWeb開発者が身につけるべき必須スキルとなっています。ユーザー体験とアクセシビリティを一段階向上させる良い機会として活用してください。