コンテンツ セクションを閉じる（アコーディオンと呼ばれることもあります）ことは、一般的な UI パターンです。ただし、閉じられたセクションに非表示になったコンテンツは、ページ内検索では検索できなくなります。また、折りたたまれた領域内のテキスト フラグメントにリンクすることはできません。
これらの問題は、hidden=until-found HTML 属性と beforematch イベントで解決できます。非表示コンテンツのコンテナに hidden=until-found を追加すると、ブラウザは非表示領域内のテキストを検索し、一致が見つかった場合にそのセクションを表示できるようになります。
これらの機能は Chrome 102 から利用可能になります。その仕組みを見てみましょう。
活用方法
ウェブサイトに折りたたみ可能なセクションがすでにあり、検索可能にする場合は、セクションを非表示にするスタイルを hidden=until-found 属性に置き換えます。ページに、セクションの表示状態と同期させる必要がある別の状態がある場合は、ブラウザによって要素が開かれる直前に hidden=until-found 要素で発生する beforematch イベント リスナーを追加します。
注意点
一貫したユーザー エクスペリエンスを実現するには、ページ内検索を使用せずに hidden=until-found のコンテンツを表示できるようにする必要があります。すべてのユーザーがページ内検索を使用するわけではなく、hidden=until-found に対応していないブラウザでは、ページ内検索を開示することなく、元のコンテンツと同じコンテンツが表示されます。
hidden=until-found をサポートしていないブラウザで非表示コンテンツを検索できるようにするには、そのブラウザで非表示コンテンツをいつでも展開できます。機能の検出は、beforematch イベント ハンドラの存在を確認することで行えます。
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found は、通常の hidden 属性が適用する display:none プロパティではなく、content-visibility:hidden CSS プロパティを適用します。これは、閉じている間にコンテンツを検索するために必要ですが、次のような副作用もあります。
getBoundingClientRectなどの一部のレイアウト API は、hidden=until-found要素内の非表示のコンテンツがスペースを占有し、ページ内に位置していると報告します。hidden=until-found要素の子ノードはレンダリングされませんが、hidden=until-found要素自体には引き続きボックスが含まれます。つまり、境界や明示的なサイズなどの CSS プロパティは引き続きレンダリングに影響します。
例として、次のデモでは、hidden=until-found が適用された要素にマージン、枠線、パディングを追加しています。非表示のコンテンツが表示される場所には、グレーの枠線付きのボックスが表示されます。このボックスは、非表示のコンテンツが公開されると、そのコンテンツで埋められます。これは非表示要素のボックスです。
この問題を回避するには、hidden=until-found を含むコンテナ内にネストされた要素に枠線を追加します。