もうすぐリリースされるChrome 134の新機能の中で、特に興味深い変更があったので紹介します。
※2025/2/22現在の情報のため、リリースまでの間に変更される可能性があります。
Dialog要素の新しい閉じ方
Chrome 134では、 要素の閉じ方を制御できる closedby 属性が新たに追加されます。これにより、従来JavaScriptで実装していた処理をHTMLだけで実現できるようになります。
書かれているChromeの開発者向けのBlogはこちらです。
公式ブログ
[概要]
Dialog light dismiss
One of the nice features of the Popover API is its light dismiss behavior. This feature brings the same capability to <dialog>. A new closedby attribute controls behavior:
<dialog closedby=none>: No user-triggered closing of dialogs at all.
<dialog closedby=closerequest>: Pressing ESC (or other close trigger) closes the dialog.
<dialog closedby=any>: Clicking outside the dialog, or pressing ESC, closes the dialog. The same as popover=auto behavior.
変更点の概要
これまでの課題
従来、 要素を閉じるには close() メソッドを呼び出す必要がありました。
ボタンを押して閉じる処理は比較的簡単に実装可能ですが、背景をクリックしたときに閉じる処理はクリック位置を判定し、背景なのかDialog内部なのかを判断する必要がありました。
この問題を解決するために、Chrome 134で closedby 属性が導入されます。
closedby 属性の動作
| 設定値 | 動作 |
|---|---|
| any | ESCキーまたは範囲外クリックで閉じる |
| closerequest | ESCキーで閉じる（背景クリックでは閉じない） |
| none | ESCキーでも背景クリックでも閉じない |
コードの比較
これまでの実装（JavaScriptで処理）
dialog.addEventListener("click", function (event) {
const dialogRect = dialog.getBoundingClientRect();
if (event.clientX < dialogRect.left
|| event.clientX > dialogRect.right
|| event.clientY < dialogRect.top
|| event.clientY > dialogRect.bottom) {
dialog.close();
}
});
Chrome 134以降の実装（HTMLだけで完結）
<dialog closedby="any">
~Dialogの表示する要素を記述
</dialog>
このように、HTMLの属性を設定するだけで背景クリック時の閉じる処理を実装できます。
リリースについて
| 環境 | リリース予定 | リンク |
|---|---|---|
| Chromeブラウザ | 2025/3/4 | https://developer.chrome.com/blog/chrome-134-beta?hl=ja |
| Microsoft Edge | 2025/3/6 | https://learn.microsoft.com/ja-jp/microsoft-edge/web-platform/release-notes/134 |
2025/2/22時点では、SafariやFirefoxの対応予定は見つけられませんでした。