コンテンツ セクションを閉じる（アコーディオンと呼ばれることもあります）ことは、一般的な 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 を含むコンテナ内にネストされた要素に境界を追加します。