2024年はHTMLのみでモーダルが作れそう。popover属性を試してみる。

こんにちは森田です。
2024年は JS なしでモーダルが作れそうです。
今回はそんな HTML のみでモーダルが作れる popover 属性について紹介します。

popover 属性と Popover API について

popover 属性は Popover API という仕様で策定されており。
その名のとおりHTMLのみでポップオーバー（モーダル）の状態を操作することができます。

参照：ポップオーバー API – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Popover_API

対応ブラウザ

現在のブラウザ対応状況ですが、ほぼ全てのモダンブラウザが対応しています。

今回もいつものように Firefox がサポートされていなかったですが、ついに バージョン124でサポートされることとなりました。

Firefox 124 は2024年3月リリースですので、3月からは本格的に実案件の使用も検討してよい機運が高まってきましたね。

popover 属性を試してみる

ではさっそく popover 属性を試してみたいと思います。
まずは動作確認として超シンプルなモーダルを作ってみましょう。

動作確認として超シンプルなモーダル

モーダルになる要素に popover 属性と任意の id を。表示するボタンにpopovertarget属性を指定し、モーダル要素の id を指定します。

<button popovertarget="popover">モーダル表示</button>

<div id="popover" popover>
  <p>HTMLのみでモーダルが表示されました</p>
</div>

Chrome などすでに対応したブラウザを使っている場合、ボタン押下で画面中央にモーダルが表示されているはずです。

そして、モーダル以外の箇所を触るとモーダルが閉じます。
popover 属性のデフォルトの値は auto なので自動で閉じる挙動になっています。

次回予告

次回はより実践的な popover 属性の使い方を試してみます。

[追記:2024.02.16] 実践記事書きました。

まとめ

モーダルやスムーススクロール、detailsの折りたたみなど HTML/CSS のみでできることが増えてきましたね。
shadcn/ui など振る舞いのみのコンポーネントライブラリもあり、よりマークアップとスタイリングに専念して Web サイトやアプリケーションの制作に取り組んでいけそうです。