Design for AI

dialog closedby="any" (light-dismiss dialogs)

Chrome 134, Firefox 137; Safari not yet (blocked since July 2025, Interop 2026 item).

Chrome 134Edge 134Safari noFirefox 137

Declares how a `<dialog>` may close: `any` (Escape, click outside, or programmatic), `closerequest` (Escape only), `none`. Gives modals the popover-style light-dismiss they were missing.

Click outside to close.

CSS
.fx-043 {
  border: 0;
  border-radius: 16px 16px 0 0;
  padding: 24px;
  width: min(480px,100%);
  margin: auto 0 0;
  font-family: system-ui
}
.fx-043::backdrop {
  background: #0005
}
.fx-043 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<button onclick="document.getElementById('fx-043').showModal()">Open sheet</button>
<dialog id="fx-043" class="fx-043" closedby="any"><p>Click outside to close.</p></dialog>

Fallback: Add a click handler on the dialog that closes it when `e.target === dialog` for Safari.

Source: web-platform-dx.github.io/web-features-explorer/features/dialog-closedby/

Prompt

Give modal dialogs `closedby="any"` for click-outside dismissal and `closedby="none"` for blocking confirmations. Keep a 3-line backdrop-click fallback for Safari (as of 2026-09), and never emulate dialogs with divs.