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

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

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

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

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

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

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

1. スタイルのテキスト範(fàn)囲の擬似要素、および
2. 獨(dú)自のテキストハイライトシステムを作成します。

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

方法1：様式可能なテキスト範(fàn)囲

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

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

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

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

//次に、現(xiàn)在の選択をこの範(fàn)囲に設(shè)定します。
document.getSelection（）。removeallranges（）;
document.getSelection（）。アドレンジ（範(fàn)囲）;

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

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

この手法を使用して、ページ內(nèi)のすべての単語を強(qiáng)調(diào)表示する例は次のとおりです。

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

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

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

したがって、ユーザーテキストの選択は、実裝が比較的簡単で、ページのDOMを変更しないため、優(yōu)れています。実際、範(fàn)囲オブジェクトは、存在するために作成する必要があるHTML要素ではなく、本質(zhì)的にページ內(nèi)の段落の座標(biāo)です。

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

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

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

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

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

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

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

CSSカスタムハイライトAPI

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

テキスト範(fàn)囲を作成します

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

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

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

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

ハイライトを作成します

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

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

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

ハイライトを登録します

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

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

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

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

スタイルの強(qiáng)調(diào)表示

最後のステップは、登録されたハイライトを?qū)g際にスタイリングすることです。これは、ハイライトオブジェクトを登録するときに選択した名前を使用して、新しい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

強(qiáng)調(diào)表示を更新します

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

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

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

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

ブラウザのサポート

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

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

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

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

デモ

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

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

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

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

要約します

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

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

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

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

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

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

以上がCSSカスタムハイライトAPI：最初の外観の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。