圖片素材庫最常被忽略的那道斷層

經營過素材庫、寫真站、線上作品集的同業，後台客服信裡大概都收過類似的一句：「我剛剛搜到那張圖了，但畫面卡在搜尋結果頁，要自己再點進去、自己滑。」

這句抱怨的本質，是搜尋結果與圖片實際位置之間有一道縫。訪客用字搜到東西，瀏覽器卻沒有把這段字「指」到畫面上該出現的位置。過去要補這道縫，工程師得自己寫 JavaScript：抓 URL hash、捲動到目標元素、加 highlight class、處理跨頁跳轉時機。一套寫下來，少說幾百行。

2026 年 CSS-Tricks 整理了一組新的 CSS pseudo-element——::search-text、：：target-text、：：highlight()——讓瀏覽器原生就能處理這件事。這對素材庫類網站是個具體可用的改變，不是 demo 階段的玩具。

::search-text 是什麼？跟過去做法差在哪

：：search-text 出自 CSS Pseudo-Elements Module Level 4 規範，Chrome 與 Safari 已經有實作進度。它做的事情很單純：讓瀏覽器知道「畫面上這幾個字元正在被搜尋」，並允許 CSS 直接為這段字加樣式。

搭配處理 URL fragment 的：：target-text，以及 CSS Custom Highlight API 裡的：：highlight（），工程師能做到幾件事：

訪客從站內搜尋點進某張圖後，瀏覽器自動把匹配字反白
訪客從 Google、Yahoo 連進來時，瀏覽器知道訪客剛剛搜了什麼字，自動在頁面標出
圖片的描述、alt 文字、標籤被捲到畫面中央，並有明顯視覺標示

這對素材庫來說，是把「搜尋到瀏覽」的最後一哩路從工程問題變成瀏覽器原生行為。

對台灣素材庫業主，這件事為什麼值得停下來看

找到圖的最後一哩路被自動化

過去素材庫的 SEO 文章多半圍繞 alt 怎麼寫、圖片 sitemap 怎麼送，卻很少談訪客從 Google 點進來之後發生什麼。如果訪客搜「台北夜景 4K」進到你的站，瀏覽器能自動把那四個字在頁面裡反白，訪客當下就會知道——找對地方了。

這對素材庫、寫真站、相簿網站、線上作品集四類業主最有感，因為這幾種站的訪客幾乎都是「帶字進來」。想知道互動銜接怎麼完整做法見形象網站設計怎麼讓互動更流暢？CSS 監聽 JS 事件新趨勢與實務建議。想知道互動細節怎麼銜接可看形象網站設計怎麼讓互動更流暢？CSS 監聽 JS 事件新趨勢與實務建議。

以前要做頁內搜尋，工程師得選 fuzzy search library、寫 highlight、處理捲動動畫，還要處理跨瀏覽器相容。現在原生 API 把底層包進瀏覽器，設計師可以把時間花在真正影響體驗的事：反白顏色配什麼色票、捲動要俐落還是要帶緩動、找不到字時引導文案要寫什麼。這些才是使用者記得住的部分。想了解互動設計如何搭配這類新語法，可參考形象網站設計怎麼讓互動更流暢？CSS 監聽 JS 事件新趨勢與實務建議。

不是所有瀏覽器都支援，先確認你的客群用什麼

截至 2026 年 6 月，：：search-text 主要在 Chromium 系列（Chrome、Edge）與 Safari 支援，Firefox 還在追蹤中。如果你做的是設計師取向的素材庫，設計師圈用 Chrome 的比例高，受惠最直接；如果是面向一般大眾的寫真站，會有一部分訪客體驗不到反白效果。

這個支援落差，是業主評估時最需要知道的現實面，不能當作技術細節跳過。