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

Chrome 134, Firefox 137; Safari ainda não (bloqueado desde julho de 2025, item do Interop 2026).

Chrome 134Edge 134Safari noFirefox 137

Declara como um `<dialog>` pode fechar: `any` (Escape, clique fora ou programático), `closerequest` (só Escape), `none`. Dá aos modais o light-dismiss estilo popover que faltava.

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: Adicione um handler de clique no dialog que o fecha quando `e.target === dialog` para o Safari.

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

Prompt

Dê aos diálogos modais `closedby="any"` para fechar com clique fora e `closedby="none"` para confirmações bloqueantes. Mantenha um fallback de 3 linhas de clique no backdrop para o Safari (em 2026-09), e nunca emule diálogos com divs.