HTMLのdialog要素とフォーム機能 - Hatena Developer Blog

こんにちは、id:nanto_viです。この記事ははてなエンジニアAdvent Calendarの1日目の分です。 Webアプリケーションでモーダルダイアログを実現しようとして苦戦したことはないでしょうか？ 自前でHTML、CSS、JavaScriptを組み合わせて実装していくと、フォーカスやスクロールの制御が大変ですよね。そんな悩みを解決してくれるのがHTMLのdialog要素、Webブラウザ組み込みのモーダルダイアログ実装が利用できるという優れものです（モードレスダイアログとしても利用できます）。 dialog要素を使うことで、モーダルダイアログに要求されるJavaScript機能をブラウザが肩代わりしてくれるので、アクセシビリティの確保も簡単になります。 2021年12月現在、ChromeやEdgeはすでにdialog要素に対応しています。FirefoxやSafariの開発版でも対応

[onk]

dialog 要素知らなかった！アクセシビリティ的に正しいモーダル作るの大変なのでデファクトになっていくかなぁ。

[KoshianX]

dialog 要素なんてものができたのか。知らんかったなあ。ああいうモーダル、あんま気軽に使わないほうがいいとは思うんだが

[mizdra]

method="dialog" 面白い

[stefafafan]

全然知らなかった

[tkawa]

polyfillもあるし使って良いのでは https://github.com/GoogleChrome/dialog-polyfill

[hakobe932]

へー便利！

[Magicant]

これ HTML の新しい要素として定義する必要あるん? JS の alert なり confirm なりを拡張するだけでいけるやろと思ふんやが

[hogashi]

"最初に出現する送信ボタン" そうなんだ

[hs_hachi]

へーーためになった

[Pasta-K]

早くメジャーなブラウザで使えるようになって欲しい〜