網(wǎng)頁文本樣式化一直是開發(fā)者關(guān)注的焦點(diǎn)。令人期待的是CSS Custom Highlight API的出現(xiàn)，它將革新網(wǎng)頁文本范圍樣式化。

舉例來說，Google Docs、Word或Dropbox Paper等文本編輯軟件會(huì)檢測拼寫和語法錯(cuò)誤，并在下方顯示波浪線以提示用戶。VS Code等代碼編輯器對代碼錯(cuò)誤也采用類似方法。

另一個(gè)常見的文本高亮用例是搜索和高亮功能，用戶在輸入框中輸入文本，頁面會(huì)搜索匹配結(jié)果并高亮顯示。現(xiàn)在，您可以在瀏覽器中嘗試按下Ctrl/? F，然后輸入本文中的部分文本。

瀏覽器通常會(huì)自動(dòng)處理這些樣式情況?？删庉媴^(qū)域（如）會(huì)自動(dòng)顯示拼寫錯(cuò)誤的波浪線。查找命令會(huì)自動(dòng)高亮顯示找到的文本。

但是，如果我們想自己進(jìn)行這種樣式化怎么辦？長期以來，如何在網(wǎng)頁上實(shí)現(xiàn)這一點(diǎn)一直是一個(gè)常見問題，它可能浪費(fèi)了許多人大量的時(shí)間。

這不是一個(gè)簡單的難題。我們不僅僅是用帶有class的<span></span>標(biāo)簽包裹文本并應(yīng)用一些CSS。實(shí)際上，這需要能夠正確地高亮顯示跨越任意復(fù)雜DOM樹的多個(gè)文本范圍，并且可能跨越DOM元素的邊界。

解決這個(gè)問題的常見方法有兩種：

1. 樣式化文本范圍偽元素，以及
2. 創(chuàng)建您自己的文本高亮系統(tǒng)。

我們首先回顧一下這兩種方法，然后看看即將推出的CSS Custom Highlight API如何改變這一切。

方法一：可樣式化文本范圍

最著名的可樣式化文本范圍可能是用戶選擇。當(dāng)您使用指向設(shè)備選擇網(wǎng)頁上的文本時(shí)，會(huì)自動(dòng)創(chuàng)建一個(gè)Selection對象。事實(shí)上，現(xiàn)在嘗試選擇此頁面上的文本，然后在DevTools控制臺(tái)中運(yùn)行document.getSelection()。您應(yīng)該會(huì)看到所選文本的位置信息。

事實(shí)證明，您還可以通過JavaScript以編程方式創(chuàng)建文本選擇。以下是一個(gè)示例：

// 首先，創(chuàng)建一個(gè)Range對象。
const range = new Range();

// 并設(shè)置其起始和結(jié)束位置。
range.setStart(parentNode, startOffset);
range.setEnd(parentNode, endOffset);

// 然后，將當(dāng)前選擇設(shè)置為此范圍。
document.getSelection().removeAllRanges();
document.getSelection().addRange(range);

最后一塊拼圖是樣式化此范圍。CSS有一個(gè)名為::selection的偽元素可以做到這一點(diǎn)，并且它在所有瀏覽器中都受支持。

::selection {
  background-color: #f06;
  color: white;
}

以下是一個(gè)使用此技術(shù)依次高亮顯示頁面中所有單詞的示例：

除了::selection偽元素之外，還有許多其他偽元素：

• ::target-text 選擇瀏覽器中已滾動(dòng)到的文本（支持滾動(dòng)到文本功能的瀏覽器）。(MDN)
• ::spelling-error 選擇瀏覽器標(biāo)記為包含拼寫錯(cuò)誤的文本。(MDN)
• ::grammar-error 選擇瀏覽器標(biāo)記為包含語法錯(cuò)誤的文本。(MDN)

不幸的是，這里的瀏覽器支持不是很好，盡管這些范圍本身很有用，但它們不能用于樣式化自定義文本片段——只能樣式化瀏覽器預(yù)定義的文本片段。

因此，用戶文本選擇很好，因?yàn)樗鄬θ菀讓?shí)現(xiàn)，并且不會(huì)更改頁面的DOM。實(shí)際上，Range對象本質(zhì)上是頁面中段落的坐標(biāo)，而不是需要?jiǎng)?chuàng)建才能存在的HTML元素。

然而，一個(gè)主要的缺點(diǎn)是，創(chuàng)建選擇會(huì)重置用戶已經(jīng)手動(dòng)選擇的任何內(nèi)容。嘗試在上面的演示中選擇文本以測試這一點(diǎn)。您會(huì)看到代碼將選擇移動(dòng)到其他位置時(shí)，它會(huì)消失。

方法二：自定義高亮系統(tǒng)

如果您使用Selection對象不足以滿足您的需求，那么第二個(gè)解決方案幾乎是唯一的選擇。此解決方案圍繞著自己動(dòng)手做所有事情，使用JavaScript在您希望高亮顯示出現(xiàn)的位置插入新的HTML元素。

不幸的是，這意味著需要編寫和維護(hù)更多的JavaScript代碼，更不用說每當(dāng)高亮顯示更改時(shí)，它都會(huì)強(qiáng)制瀏覽器重新創(chuàng)建頁面的布局。此外，還有一些復(fù)雜的邊緣情況，例如，當(dāng)您想高亮顯示跨越多個(gè)DOM元素的文本片段時(shí)。

有趣的是，CodeMirror和Monaco（為VS Code提供支持的JavaScript文本編輯器庫）有自己的高亮邏輯。它們使用稍微不同的方法，其中高亮顯示包含在DOM樹的單獨(dú)部分中。文本行和高亮顯示的段落在DOM中的兩個(gè)不同位置呈現(xiàn)，然后彼此定位。如果您檢查包含文本的DOM子樹，則沒有高亮顯示。通過這種方式，可以重新渲染高亮顯示而不會(huì)影響文本行，并且不必在文本行中引入新的元素。

總的來說，感覺缺少一個(gè)瀏覽器支持的高亮顯示功能。某些功能可以幫助解決所有這些缺點(diǎn)（不會(huì)干擾用戶文本選擇，支持多選，代碼簡單）并且比自定義解決方案更快。

幸運(yùn)的是，這就是我們在這里要討論的內(nèi)容！

CSS Custom Highlight API

CSS Custom Highlight API是一個(gè)新的W3C規(guī)范（目前處于工作草案狀態(tài)），它使得可以從JavaScript樣式化任意文本范圍！這里的方法與我們前面回顧的用戶文本選擇技術(shù)非常相似。它為開發(fā)人員提供了一種方法來創(chuàng)建任意范圍（來自JavaScript），然后使用CSS對其進(jìn)行樣式化。

創(chuàng)建文本范圍

第一步是創(chuàng)建要高亮顯示的文本范圍，這可以使用JavaScript中的Range來完成。因此，就像我們在設(shè)置當(dāng)前選擇時(shí)所做的那樣：

const range = new Range();
range.setStart(parentNode, startOffset);
range.setEnd(parentNode, endOffset);

值得注意的是，如果作為第一個(gè)參數(shù)傳遞的節(jié)點(diǎn)是文本節(jié)點(diǎn)或不是文本節(jié)點(diǎn)，則setStart和setEnd方法的工作方式不同。對于文本節(jié)點(diǎn)，偏移量對應(yīng)于節(jié)點(diǎn)中的字符數(shù)。對于其他節(jié)點(diǎn)，偏移量對應(yīng)于父節(jié)點(diǎn)中的子節(jié)點(diǎn)數(shù)。

還值得注意的是，setStart和setEnd并不是描述范圍起始和結(jié)束位置的唯一方法。查看Range類上可用的其他方法以查看其他選項(xiàng)。

創(chuàng)建高亮顯示

第二步包括為上一步中創(chuàng)建的范圍創(chuàng)建Highlight對象。Highlight對象可以接收一個(gè)或多個(gè)Range。因此，如果您想以完全相同的方式高亮顯示許多文本片段，則可能應(yīng)該創(chuàng)建一個(gè)Highlight對象并使用與這些文本片段對應(yīng)的所有Range來初始化它。

const highlight = new Highlight(range1, range2, ..., rangeN);

但是您也可以根據(jù)需要?jiǎng)?chuàng)建任意數(shù)量的Highlight對象。例如，如果您正在構(gòu)建一個(gè)協(xié)作文本編輯器，其中每個(gè)用戶獲得不同的文本顏色，那么您可以為每個(gè)用戶創(chuàng)建一個(gè)Highlight對象。然后可以對每個(gè)對象進(jìn)行不同的樣式化，正如我們接下來將看到的。

注冊高亮顯示

現(xiàn)在，Highlight對象本身不會(huì)執(zhí)行任何操作。它們首先需要在所謂的突出顯示注冊表中注冊。這是使用CSS Highlights API完成的。注冊表就像一個(gè)地圖，您可以通過為高亮顯示指定名稱來注冊新的高亮顯示，以及刪除高亮顯示（甚至清除整個(gè)注冊表）。

以下是注冊單個(gè)高亮顯示的方法。

CSS.highlights.set('my-custom-highlight', highlight);

其中my-custom-highlight是您選擇的名稱，highlight是上一步中創(chuàng)建的Highlight對象。

樣式化高亮顯示

最后一步是實(shí)際樣式化已注冊的高亮顯示。這是使用新的CSS ::highlight()偽元素完成的，使用您在注冊Highlight對象時(shí)選擇的名稱（在我們的示例中為my-custom-highlight）。

::highlight(my-custom-highlight) {
  background-color: yellow;
  color: black;
}

值得注意的是，就像::selection一樣，只有一部分CSS屬性可以與::highlight()偽元素一起使用：

• background-color
• caret-color
• color
• cursor
• fill
• stroke
• stroke-width
• text-decoration（這可能只在規(guī)范的版本2中受支持）
• text-shadow

更新高亮顯示

有多種方法可以更新頁面上的高亮顯示文本。

例如，您可以使用CSS.highlights.clear()完全清除高亮顯示注冊表，然后從頭開始?；蛘?，您還可以更新底層范圍，而無需重新創(chuàng)建任何對象。為此，再次使用range.setStart和range.setEnd方法（或任何其他Range方法），瀏覽器將重新繪制高亮顯示。

但是，Highlight對象的工作方式類似于JavaScript Set，這意味著您還可以使用highlight.add(newRange)將新的Range對象添加到現(xiàn)有的Highlight中，或者使用highlight.delete(existingRange)刪除Range。

第三，您還可以向CSS.highlights注冊表添加或刪除特定的Highlight對象。由于此API的工作方式類似于JavaScript Map，您可以使用set和delete來更新當(dāng)前已注冊的Highlights。

瀏覽器支持

CSS Custom Highlight API的規(guī)范相對較新，其在瀏覽器中的實(shí)現(xiàn)仍不完整。因此，盡管這將成為Web平臺(tái)的一個(gè)非常有用的補(bǔ)充，但它還不太適合用于生產(chǎn)環(huán)境。

Microsoft Edge團(tuán)隊(duì)目前正在Chromium中實(shí)現(xiàn)CSS Custom Highlight API。事實(shí)上，通過啟用實(shí)驗(yàn)性Web平臺(tái)功能標(biāo)志（在about:flags下），現(xiàn)在就可以在Canary版本中使用此功能。目前還沒有關(guān)于該功能何時(shí)將在Chrome、Edge和其他基于Chromium的瀏覽器中發(fā)布的明確計(jì)劃，但它已經(jīng)非常接近了。

Safari 99 也支持此API，但在實(shí)驗(yàn)標(biāo)志（Develop → Experimental Features → Highlight API）之后，并且接口略有不同，因?yàn)樗褂肧taticRange對象而不是Range對象。

Firefox尚不支持此API，不過您可以閱讀Mozilla關(guān)于此API的立場以了解更多信息。

演示

說到Microsoft Edge，他們已經(jīng)設(shè)置了一個(gè)演示，您可以在其中試用CSS Custom Highlight API。但在嘗試演示之前，請確保您使用的是啟用了about:flags頁面中實(shí)驗(yàn)性Web平臺(tái)功能標(biāo)志的Chrome或Edge Canary。

/button 查看演示

該演示使用Custom Highlight API根據(jù)您在頁面頂部搜索字段中輸入的內(nèi)容來高亮顯示頁面中的文本范圍。

頁面加載后，JavaScript代碼檢索頁面中的所有文本節(jié)點(diǎn)（使用TreeWalker），當(dāng)用戶在搜索字段中鍵入內(nèi)容時(shí)，代碼會(huì)迭代這些節(jié)點(diǎn)，直到找到匹配項(xiàng)。然后使用這些匹配項(xiàng)創(chuàng)建Range對象，然后使用Custom Highlight API對其進(jìn)行高亮顯示。

總結(jié)

那么，這個(gè)新的瀏覽器提供的高亮顯示API真的值得嗎？絕對值得！

首先，即使CSS Custom Highlight API起初看起來有點(diǎn)復(fù)雜（例如，必須創(chuàng)建范圍，然后是高亮顯示，然后注冊它們，最后樣式化它們），它仍然比創(chuàng)建新的DOM元素并將它們插入到正確的位置要簡單得多。

更重要的是，瀏覽器引擎可以非常非常快速地樣式化這些范圍。

僅允許使用一部分CSS屬性與::highlight()偽元素一起使用的理由是，這部分屬性只包含瀏覽器可以非常有效地應(yīng)用的屬性，而無需重新創(chuàng)建頁面的布局。通過在頁面周圍插入新的DOM元素來高亮顯示文本范圍，需要引擎做更多工作。

但不要相信我的話。Fernando Fiori參與了該API的開發(fā)，他創(chuàng)建了這個(gè)不錯(cuò)的性能比較演示。在我的電腦上，CSS Custom Highlight API的性能平均比基于DOM的高亮顯示快5倍。

由于Chromium和Safari已經(jīng)提供了實(shí)驗(yàn)性支持，我們正越來越接近可以在生產(chǎn)環(huán)境中使用的東西。我迫不及待地想看到瀏覽器一致地支持Custom Highlight API，并看看這將解鎖哪些功能！

以上是CSS自定義突出顯示API：首次查看的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！