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

Chrome 134, Firefox 137; Safari todavía no (bloqueado desde julio de 2025, elemento de Interop 2026).

Chrome 134Edge 134Safari noFirefox 137

Declara cómo puede cerrarse un `<dialog>`: `any` (Escape, clic fuera o programático), `closerequest` (solo Escape), `none`. Da a los modales el cierre ligero al estilo popover que les faltaba.

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: Añade un manejador de clic en el diálogo que lo cierre cuando `e.target === dialog` para Safari.

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

Prompt

Da a los diálogos modales `closedby="any"` para cerrar con clic fuera y `closedby="none"` para confirmaciones bloqueantes. Conserva un respaldo de 3 líneas de clic en el backdrop para Safari (a fecha 2026-09), y nunca emules diálogos con divs.