收合內容部分 (有時稱為「折疊式」) 是常見的 UI 模式。不過，如果內容隱藏在收合的部分中，就無法透過尋找網頁內搜尋。此外，您無法在收合區域中連結至文字片段。
使用 hidden=until-found HTML 屬性和 beforematch 事件可以解決這些問題。將 hidden=until-found 新增至隱藏內容的容器後，瀏覽器就能搜尋該隱藏區域中的文字，並在找到相符項目時顯示該部分。
這些功能都是 Chrome 102 版本，讓我們來看看運作方式。
使用方式
如果網站上已有可收合區段，但你想讓使用者搜尋，請使用 hidden=until-found 屬性取代讓該區段隱藏的樣式。如果網頁也具有其他狀態，而且無論區段是否顯示內容，都必須保持同步，則新增 beforematch 事件監聽器，以便在瀏覽器顯示元素前，透過 hidden=until-found 元素觸發。
注意事項
如要提供一致的使用者體驗，請確保 hidden=until-found 內容不需使用網頁內就能顯示。並非所有使用者都會使用「從網頁中尋找」功能，不支援 hidden=until-found 的瀏覽器則會在未顯示網頁內的情況下，獲得隱藏內容的原始體驗。
如要確保在不支援 hidden=until-found 的瀏覽器上搜尋隱藏的內容，您隨時可以在這些瀏覽器中展開隱藏的內容。只要檢查是否有 beforematch 事件處理常式，即可執行特徵偵測功能：
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found 會套用 content-visibility:hidden CSS 屬性，而非套用一般隱藏屬性的 display:none 屬性。如要在關閉狀態下搜尋內容，前提是必須具有以下副作用：
- 部分版面配置 API (例如
getBoundingClientRect) 會回報hidden=until-found元素內的隱藏內容佔用空間，且該頁面有位於頁面中的位置。 - 系統不會算繪
hidden=until-found元素的子節點，但hidden=until-found元素本身仍會有一個方塊。換句話說，CSS 屬性 (例如邊框和明確尺寸) 仍會影響算繪結果。
舉例來說，以下示範會在套用 hidden=until-found 的元素中加入邊界、框線和邊框間距。在顯示隱藏內容的位置上，有一個標有灰色邊框的方塊，會在隱藏內容時填滿隱藏內容。這是隱藏元素的方塊。
如要避免這個問題，請為含有 hidden=until-found 的容器內巢狀結構元素加上邊框。
主頁橫幅由 Thomas Bormans 製作。