Chrome120から実現するdetails要素のアコーディオンパターン
details要素のアコーディオンパターンとはなにか
要点だけ抜き出すと下記のようなことがChrome120のリリース以降できるようになります。
-
details要素にname属性が追加される -
name属性を指定することでアコーディオンのようなUIが実現可能になる
アコーディオンとはなにか
アコーディオンは比較的メジャーなUIなので想像がつく方も多いと思いますが改めて解説すると
複数の折りたたみ要素が存在する場合にそれらをグループ化して、一つの折りたたみ要素を開いたら他の折りたたみ要素は閉じるような挙動をとるUIのことを指します。
こちらについては提案の元ネタであるOpenUIのページにいくつか具体例が提示されているのでこちらを確認すると認識が合いやすいかと思います。
想定されている利用方法
同じname属性を持ったdetails要素はアコーディオンのグループとして認識され、同じグループ内で開いた状態のdetails要素は１つだけとなります。
下記のようなマークアップの場合、name="foo"を持つdetails要素同士は同じグループとして認識されます。
<details name="foo">
<summary>title-1</summary>
some text.
</details>
<details name="foo">
<summary>title-2</summary>
some text.
</details>
<details name="foo">
<summary>title-3</summary>
some text.
</details>
その他ブラウザの対応状況
現在対応しているブラウザはありませんが、Chromeは120のリリースの内容にアコーディオンパターンを含めています。
Accordion pattern using name attribute on <details> elements
ChromeのRoadmapページのスクリーンショット
Chrome Platform Statusの他ブラウザの反応を見るとFirefoxは好意的で、Safariも現在開発中とのことで、他ブラウザでの実装も進んでいきそうな雰囲気はあります。
まとめ
短い内容ですがIntent to Shipを見て気になっていた内容だったので簡単にまとめてみました。
個人的に英語力に不安があるので内容に間違いがあったり、リリース前に仕様が変更される可能性など記載した内容に誤りが含まれる可能性があるかもしれませんが、そういった点があればコメントもしくはGitHubにてご連絡ください。
参考資料
Discussion