コンテンツ セクションの折りたたみ（アコーディオンとも呼ばれます）は、一般的な 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 は、通常の非表示属性が適用される display:none プロパティの代わりに、content-visibility:hidden CSS プロパティを適用します。これは、コンテンツを閉じているときに検索するために必要ですが、次のような副作用もあります。
getBoundingClientRectなどの一部のレイアウト API は、hidden=until-found要素内の隠しコンテンツがスペースを占有し、ページ内に配置されたことをレポートします。hidden=until-found要素の子ノードはレンダリングされませんが、hidden=until-found要素自体にはボックスが表示されます。つまり、枠線や明示的なサイズなどの CSS プロパティがレンダリングに影響を及ぼします。
例として、次のデモでは、hidden=until-found が適用された要素にマージン、枠線、パディングを追加しています。非表示のコンテンツが表示される場所には、灰色の枠線付きのボックスがあります。ボックスが表示されると、非表示のコンテンツで塗りつぶされます。これが隠し要素のボックスです。
この問題を回避するには、hidden=until-found のあるコンテナ内にネストされた要素に枠線を追加します。
ヒーロー画像（Thomas Bormans）。