CSSカスタムハイライトAPI：最初の外観

Webテキストのスタイリングは、常に開発者の焦点でした。予想されるのは、CSSカスタムハイライトAPIの出現であり、Webテキストスコープスタイリングに革命をもたらします。

たとえば、Google Docs、Word、Dropboxの紙などのテキスト編集ソフトウェアは、スペルと文法のエラーを検出し、以下の波状の行を表示してユーザーに促します。 VSコードなどのコードエディターは、コードエラーに同様の方法も使用します。

テキストのハイライトのもう1つの一般的なユースケースは、検索とハイライト機能です。ユーザーが入力ボックスにテキストを入力すると、ページは一致した結果を検索して強調表示します。これで、ブラウザでCtrl/⌘Fを押して、この記事のテキストの一部を入力してみてください。

ブラウザは通常、これらのスタイルを自動的に処理します。編集可能なエリア（例）誤った波状の線が自動的に表示されます。 Findコマンドは、見つかったテキストを自動的に強調表示します。

しかし、自分でスタイリングをしたい場合はどうなりますか？これをWebページに実装する方法は長い間一般的な問題であり、多くの人々にとって多くの時間を無駄にすることができます。

これは単純なパズルではありません。クラスを使用するだけではありません<span></span>タグをラップし、いくつかのCSSを適用します。実際、これには、複雑なDOMツリー全体および場合によってはDOM要素の境界を越えて複数のテキスト範囲を正しく強調する機能が必要です。

この問題を解決するには、2つの一般的な方法があります。

1. スタイルのテキスト範囲の擬似要素、および
2. 独自のテキストハイライトシステムを作成します。

まず両方のアプローチをレビューし、次に今後のCSSカスタムハイライトAPIがこのすべてをどのように変更するかを見てみましょう。

方法1：様式可能なテキスト範囲

最も有名な様式の様式なテキストは、ユーザーが選択する場合があります。デバイスを指すことを使用してWebページでテキストを選択すると、選択オブジェクトが自動的に作成されます。実際、このページでテキストを選択してから、DevToolsコンソールでdocument.getSelection()を実行してみてください。選択したテキストの位置情報が表示されます。

また、JavaScriptを介してプログラムでテキスト選択を作成できることがわかります。これが例です：

 //最初に、範囲オブジェクトを作成します。
const range = new range（）;

//開始位置と終了位置を設定します。
range.setstart（parentNode、startOffset）;
range.setend（parentNode、endoffset）;

//次に、現在の選択をこの範囲に設定します。
document.getSelection（）。removeallranges（）;
document.getSelection（）。アドレンジ（範囲）;

パズルの最後のピースは、この範囲をスタイリングすることです。 CSSには、これを行う::selectionと呼ばれる擬似要素があり、すべてのブラウザーでサポートされています。

 :: selection {
  バックグラウンドカラー：＃F06;
  色：白;
}

この手法を使用して、ページ内のすべての単語を強調表示する例は次のとおりです。

::selection擬似要素に加えて、他にも多くの擬似要素があります。

• ::target-textブラウザ内にスクロールされたテキスト（テキストへのスクロールをサポートするブラウザ）を選択します。 （MDN）
• ::spelling-errorタイプミスを含むブラウザでマークされたテキストを選択します。 （MDN）
• ::grammar-error構文エラーを含むブラウザによってマークされたテキストを選択します。 （MDN）

残念ながら、ここでのブラウザのサポートはあまり良くありません。これらのスコープ自体は便利ですが、カスタムテキストスニペットのスタイルを使用することはできません。ブラウザからの事前定義されたテキストスニペットのみです。

したがって、ユーザーテキストの選択は、実装が比較的簡単で、ページのDOMを変更しないため、優れています。実際、範囲オブジェクトは、存在するために作成する必要があるHTML要素ではなく、本質的にページ内の段落の座標です。

ただし、1つの大きな欠点は、ユーザーが手動で選択したものを何でもリセットすることです。これをテストするために、上記のデモでテキストを選択してみてください。コードが選択を別の場所に移動すると、それが消えることがわかります。

方法2：カスタムハイライトシステム

ニーズに合わせて選択オブジェクトを使用していない場合は、2番目のソリューションがほぼ唯一のオプションです。このソリューションは、JavaScriptを使用してハイライトを表示したい新しいHTML要素を挿入することを自分で行うことを中心に展開します。

残念ながら、これはより多くのJavaScriptコードを書き込み、維持する必要があることを意味します。言うまでもなく、ハイライトの変更が行われるたびにブラウザにページのレイアウトを再現させることは言うまでもありません。さらに、複数のDOM要素にまたがるテキストの断片を強調表示したい場合など、複雑なエッジケースがいくつかあります。

興味深いことに、CodemirrorとMonaco（VSコードをサポートするJavaScriptテキストエディターライブラリ）には、独自のハイライトロジックがあります。彼らは、ハイライトがDOMツリーの別の部分に含まれる、わずかに異なるアプローチを使用します。テキスト行と強調表示された段落は、DOMの2つの異なる場所でレンダリングされ、互いに配置されます。テキストを含むDOMサブツリーを確認すると、強調表示されません。このようにして、テキスト行に影響を与えることなくハイライトを再レンダリングすることができ、新しい要素をテキスト行に導入する必要はありません。

全体として、ブラウザがサポートしているハイライト機能が欠落しているように感じます。一部の機能は、これらすべての欠点を解決するのに役立ちます（ユーザーテキストの選択、複数の選択のサポート、シンプルコードを妨げることはありません）、カスタムソリューションよりも高速です。

幸いなことに、それがここで議論しようとしていることです！

CSSカスタムハイライトAPI

CSSカスタムハイライトAPIは、任意のテキスト範囲をJavaScriptからスタイリングできる新しいW3C仕様（現在作業ドラフト状態）です。ここでの方法は、以前にレビューしたユーザーテキスト選択手法に非常に似ています。開発者に（JavaScriptから）任意のスコープを作成し、CSSを使用してスタイルを整える方法を提供します。

テキスト範囲を作成します

最初のステップは、ハイライトするテキスト範囲を作成することです。これは、JavaScriptの範囲を使用して実行できます。だから、現在の選択を設定するときにそうするように：

 const range = new range（）;
range.setstart（parentNode、startOffset）;
range.setend（parentNode、endoffset）;

最初のパラメーターとしてノードが渡された場合、テキストノードではない場合、 setStartとsetEndメソッドは異なる動作をすることに注意してください。テキストノードの場合、オフセットはノード内の文字の数に対応します。他のノードの場合、オフセットは親ノードの子供の数に対応します。

また、 setStartとsetEnd範囲の開始位置と終了位置を説明する唯一の方法ではないことに注意する価値があります。レンジクラスで利用可能な他の方法をチェックして、他のオプションを確認してください。

ハイライトを作成します

2番目のステップは、前のステップで作成されたスコープのハイライトオブジェクトを作成することです。ハイライトオブジェクトは、1つ以上の範囲を受信できます。したがって、まったく同じ方法で多くのテキストスニペットを強調表示したい場合は、おそらくハイライトオブジェクトを作成し、テキストスニペットに対応するすべての範囲で初期化する必要があります。

 const highlight = new Highlight（range1、range2、...、rangen）;

ただし、必要なだけハイライトオブジェクトを作成することもできます。たとえば、各ユーザーが異なるテキストカラーを取得するコラボレーションテキストエディターを構築する場合、各ユーザーのハイライトオブジェクトを作成できます。次に表示されるように、各オブジェクトは異なる方法でスタイリングできます。

ハイライトを登録します

今、ハイライトオブジェクト自体は何もしません。最初に、いわゆるハイライトレジストリに登録する必要があります。これは、CSSハイライトAPIを使用して行われます。レジストリは、ハイライトの名前を指定してハイライトを削除する（またはレジストリ全体をクリアする）ことで新しいハイライトを登録できるマップのようなものです。

1つのハイライトを登録する方法は次のとおりです。

 css.highlights.set（ 'My-Custom-Highlight'、ハイライト）;

my-custom-highlightは、選択した名前とhighlight前のステップで作成されたハイライトオブジェクトです。

スタイルの強調表示

最後のステップは、登録されたハイライトを実際にスタイリングすることです。これは、ハイライトオブジェクトを登録するときに選択した名前を使用して、新しいcss ::highlight() pseudo-elementで行われます（例ではmy-custom-highlight ）。

 :: highlight（私のカスタムハイライト）{
  背景色：黄色。
  色：黒;
}

::selectionように、CSS属性の一部のみが::highlight() pseudo-elementで使用できることは注目に値します。

• background-color
• caret-color
• color
• cursor
• fill
• stroke
• stroke-width
• text-decoration （これは、仕様のバージョン2でのみサポートされる場合があります）
• text-shadow

強調表示を更新します

ページ上の強調表示されたテキストを更新する方法はいくつかあります。

たとえば、 CSS.highlights.clear()を使用して、ハイライトレジストリを完全にクリアしてゼロから開始できます。または、オブジェクトを再作成せずに、基礎となるスコープを更新することもできます。これを行うには、 range.setStartとrange.setEndメソッド（またはその他の範囲メソッド）を再度使用すると、ブラウザがハイライトを塗り直します。

ただし、ハイライトオブジェクトはJavaScriptセットと同様に機能します。つまり、 highlight.add(newRange)を使用して既存のハイライトに新しい範囲オブジェクトを追加するか、 highlight.delete(existingRange)を使用して範囲を削除することもできます。

第三に、特定のハイライトオブジェクトをCSS.highlightsレジストリに追加または削除することもできます。このAPIはJavaScriptマップと同様に機能するため、 setとdeleteを使用して、現在登録されているハイライトを更新できます。

ブラウザのサポート

CSSカスタムハイライトAPIの仕様は比較的新しいものであり、ブラウザでの実装はまだ不完全です。したがって、これはWebプラットフォームに非常に便利な追加になりますが、生産環境にはまだ適していません。

Microsoft Edgeチームは現在、ChromiumのCSSカスタムハイライトAPIを実装しています。実際、この機能は、実験的なWebプラットフォーム機能フラグを有効にすることにより、Canaryバージョンで利用できるようになりました（About：Flags）。この機能がChrome、Edge、その他のクロムベースのブラウザでいつリリースされるかについての明確な計画はありませんが、すでに非常に近いです。

Safari 99はこのAPIもサポートしていますが、実験フラグの後（開発→実験的特徴→APIのハイライト）、範囲オブジェクトの代わりに静的レンジオブジェクトを使用するため、インターフェイスはわずかに異なります。

FirefoxはまだこのAPIをサポートしていませんが、詳細についてはこのAPIでのMozillaの位置を読むことができます。

デモ

Microsoft Edgeといえば、CSSカスタムハイライトAPIを試すことができるデモを設定しました。ただし、デモを試す前に、About：Flagsページで有効になっている実験的なWebプラットフォーム機能フラグを使用して、ChromeまたはEdge Canaryを使用していることを確認してください。

/ボタンデモを表示します

このデモンストレーションでは、カスタムハイライトAPIを使用して、ページの上部にある検索フィールドに入力するものに基づいて、ページのテキスト範囲を強調表示します。

ページがロードされると、JavaScriptコードはページ内のすべてのテキストノード（TreeWalkerを使用）を取得し、ユーザーが検索フィールドに何かを入力すると、一致するまでコードがこれらのノードを反復します。次に、これらの一致を使用して範囲オブジェクトを作成し、カスタムハイライトAPIを使用して強調表示します。

要約します

それで、この新しいブラウザによって提供されるハイライトAPIは本当に価値がありますか？間違いなく価値があります！

まず、CSSカスタムハイライトAPIが最初に少し複雑に見える場合でも（たとえば、スコープを作成してから強調表示してから登録し、最後にスタイルする必要があります）、新しいDOM要素を作成して適切な場所に挿入するよりもはるかに簡単です。

さらに重要なことは、ブラウザエンジンがこれらの範囲を非常に迅速にスタイリングできることです。

::highlight() pseudo-elementでCSS属性の一部を使用できるようにする理由は、属性のこの部分にページのレイアウトを再現せずに非常に効果的に適用できるプロパティのみが含まれているためです。エンジンは、テキストの範囲を強調するためにページの周りに新しいDOM要素を挿入することにより、より多くの作業を行う必要があります。

しかし、私を信じないでください。 Fernando FioriはAPIの開発に関与し、この素晴らしいパフォーマンス比較デモを作成しました。私のコンピューターでは、CSSカスタムハイライトAPIのパフォーマンスは、DOMベースのハイライトよりも平均5倍高速です。

ChromiumとSafariはすでに実験的なサポートを提供しているため、生産環境で使用できるものに近づいています。ブラウザが一貫してカスタムハイライトAPIをサポートし、これがロックを解除する機能を確認するのが待ちきれません！

以上がCSSカスタムハイライトAPI：最初の外観の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。