detailsタグで背景クリックでも閉じるポップアップメニューを実装する

• メニューの外側をクリックしても閉じるポップアップメニューをよく見かけるが、開閉時・背景クリック時の処理をjsで制御したくないのでHTML・CSSのみで実装したい
• 今回は<details>で実装してみる
  • input[type="checkbox"]はタグ本来の役割から逸れるため除外
  • そもそもモーダルではないので<dialog>は選択肢から除外
• <details>でどのようにして背景クリックで閉じるようにするか

解決法

details[open] summary + * {
  position: relative;
}

details[open] summary::before {
  position: fixed;
  inset: 0;
  content: '';
}

• <summary>の擬似要素を画面いっぱいに広げることで、コンテンツ要素の外側をクリックした際にも閉じるようにする
• 擬似要素がコンテンツ要素の上に重なることを防ぐためにposition: relativeを指定する