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

`<dialog>` + `:modal` Baseline 2022. Atributo `closedby`: Chrome 134, Firefox 137; Safari pendente (item do Interop 2026), então não é Baseline em 2026-09.

Chrome 134Edge 134Safari noFirefox 137

Diálogos modais nativos têm o focus trapping correto, a inércia da página e o tratamento de Escape. `closedby="any"` adiciona light-dismiss (clique fora fecha), `closedby="none"` bloqueia o Escape, sem listeners em JS.

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: Sem `closedby`, só o Escape fecha; adicione um handler de clique no dialog que verifica `event.target === dialog` onde o light-dismiss for necessário.

Fonte: 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

Use o elemento nativo `<dialog>` com `showModal()` para modais; estilize a camada escurecida com `::backdrop`, use formulários com `method="dialog"` para fechar, e adicione `closedby="any"` para light-dismiss (o Safari não tem em 2026-09, então mantenha também um pequeno handler de clique no backdrop). Não construa um focus trap customizado nem uma div com `aria-modal`.