Design for AI

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

Chrome 134, Firefox 137; Safari noch nicht (blockiert seit Juli 2025, Interop-2026-Punkt).

Chrome 134Edge 134Safari noFirefox 137

Deklariert, wie ein `<dialog>` geschlossen werden darf: `any` (Escape, Klick außerhalb oder programmatisch), `closerequest` (nur Escape), `none`. Gibt Modals den Light-Dismiss im Popover-Stil, der ihnen fehlte.

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: Ergänze für Safari einen Click-Handler auf dem Dialog, der ihn schließt, wenn `e.target === dialog`.

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

Prompt

Gib modalen Dialogen `closedby="any"` für das Schließen per Klick außerhalb und `closedby="none"` für blockierende Bestätigungen. Behalte einen 3-zeiligen Backdrop-Click-Fallback für Safari (Stand 2026-09) und emuliere Dialoge nie mit divs.