コンテンツ セクションの折りたたみ(アコーディオンとも呼ばれます)は、一般的な 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)。