<dialog> improvements (closedby, :modal, requestClose)

`<dialog>` + `:modal` Baseline 2022. `closedby`-Attribut: Chrome 134, Firefox 137; Safari ausstehend (Interop-2026-Punkt), also Stand 2026-09 nicht Baseline.

Chrome 134Edge 134Safari noFirefox 137

Native modale Dialoge haben die richtige Fokusfalle, Inertheit der Seite und Escape-Behandlung. `closedby="any"` ergänzt Light-Dismiss (Klick außerhalb schließt), `closedby="none"` blockiert Escape, ohne JS-Listener.

CSS

.fx-013 {
  border: 0;
  border-radius: 14px;
  padding: 24px;
  max-width: 360px;
  box-shadow: 0 20px 60px #0004;
  font-family: system-ui
}
.fx-013::backdrop {
  background: #0006;
  backdrop-filter: blur(3px)
}
.fx-013:modal {
  margin: auto
}
@starting-style {
  .fx-013:open {
    opacity: 0;
    translate: 0 12px
  }
}
.fx-013:open {
  transition: opacity .2s,translate .2s
}
.fx-013 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<button class="fx-013-btn" onclick="document.getElementById('fx-013').showModal()">Open dialog</button>
<dialog id="fx-013" class="fx-013" closedby="any">
  <h3>Confirm</h3><p>Click outside or press Escape to dismiss.</p>
  <form method="dialog"><button>Done</button></form>
</dialog>

Fallback: Ohne `closedby` schließt nur Escape; ergänze einen Click-Handler auf dem Dialog, der `event.target === dialog` prüft, wo Light-Dismiss nötig ist.

Quelle: web-platform-dx.github.io/web-features-explorer/features/dialog-closedby/ and https://github.com/web-platform-tests/interop/blob/main/2026/README.md

Prompt

Nutze das native `<dialog>`-Element mit `showModal()` für Modals; style die abgedunkelte Ebene mit `::backdrop`, nutze `method="dialog"`-Formulare zum Schließen und ergänze `closedby="any"` für Light-Dismiss (Safari fehlt es Stand 2026-09, also behalte zusätzlich einen winzigen Backdrop-Click-Handler). Baue keine eigene Fokusfalle und kein `aria-modal`-div.