light dismiss für dialog in Chrome 134

[Matthias Scharwies]

Servus!

eigentlich warte ich ja auf die command und commandfor-Attribute, um dialog ohne JS zu öffnen.

Heute hat mich Manuel Matuzović überrascht:

https://matuzo.at/blog/2025/close-requests-dialog?u=1

Das Schließen ohne JS geht so in allen Browsern:

<dialog>
   <form method="dialog">
     <button>close</button>
   </form>
   <h1>Hello World</h1>
</dialog>

Ein light dismiss (Klick auf die Fläche außerhalb des Dialogs) geht in Chrome 134 mit:

<dialog closedby="any">
   <h1>Hello World</h1>
</dialog>

Da muss das entsprechende Tutorial bald überarbeitet werden!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

closedby

Oookay - das muss dann wohl noch reifen. Die Spec ist hier sogar widersprüchlich, sie sagen, dass "Auto" der Defaultstate sei, dabei ist das gar kein gültiger enumerated value. Meh! Issue! ^[1]

Darüber hinaus gibt's ein offenes Spec Issue, dass sich closedby und popover nicht gut vertragen würden.

Aber hat Dich das hier auch überrascht?

<form method="dialog">

Das würde mich nämlich überraschen 😉

Rolf

---

1. Bless you! ↩︎

[Matthias Scharwies]

Servus!

Hallo Matthias,

closedby

Oookay - das muss dann wohl noch reifen. Die Spec ist hier sogar widersprüchlich, sie sagen, dass "Auto" der Defaultstate sei, dabei ist das gar kein gültiger enumerated value. Meh! Issue! ^[1]

Darüber hinaus gibt's ein offenes Spec Issue, dass sich closedby und popover nicht gut vertragen würden.

Das zeigt ja wohl einmal mehr, dass Google Chorme etwas entwickelt und die Spec dann anschließend beschreibt, wie's läuft!

Aber hat Dich das hier auch überrascht?

<form method="dialog">

Das würde mich nämlich überraschen 😉

Ehrlich gesagt ja! Erst hatte ich beide Bsp. von Manuel im Chrome 134 ausprobiert, dann im Firefox und dann unseren Artikel verglichen.

Als ich das letzte Mal dialog für die ToDo-Liste verwendet hatte, habe ich alles mit JS geöffnet und geschlossen - weil ich die HTML-only-Lösung nicht auf dem Schirm hatte.

Herzliche Grüße

Matthias Scharwies

---

1. Bless you! ↩︎

[Matthias Scharwies]

Mahlzeit!

Aber hat Dich das hier auch überrascht?

<form method="dialog">

Das würde mich nämlich überraschen 😉

Ehrlich gesagt ja!

Als ich das letzte Mal dialog für die ToDo-Liste verwendet hatte, habe ich alles mit JS geöffnet und geschlossen - weil ich die HTML-only-Lösung nicht auf dem Schirm hatte.

Ich habe jetzt das Tutorial überarbeitet:

• Infobox/modale Dialogfenster

Vordergründig, um die neuen Attribute einzuführen:

• Öffnen_mit_command - Das funktioniert nur im Chrome Canary
  Ich finde command als Namen sehr viel besser als popovertarget und invoketarget; ebensocommandfor anstelle von popovertargetaction
  Andererseits hätte vielleicht ein for wie bei label gereicht.
• light dismiss mit closedby -ebenfalls nur im Canary

Das hätte aber noch Zeit gehabt. Was mich im Verständnis raus gebracht hatte, war unser erstes Beispiel. Da es mit open und CSS geöffnet wurde, hat es kein showModal()und kann deshalb nicht mit ESC geschlossen werden. Das habe ich in Tutorial und Referenz-Artikel genauer erklärt.

Was hoffentlich ebenfalls deutlicher geworden ist:
Der Unterschied zwischen nichtmodalem Popover und modalem Dialog.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Rolf B,

Meh! Issue!

Doch keins. Ich musste mich belehren lassen, dass der enum value "auto" und der Attribute-Status "Auto" zwei verschiedene Dinge sind.

Heißt: In einem modalen Dialog ist der Defaultwert von closedby closerequest, und in einem nichtmodalen Dialog ist es "none" (heißt: nur mit close() schließbar)

Was genau ein Close Request für Dialoge ist, habe ich in der Spec noch nicht herausgefunden. Ein close()-Aufruf ist es jedenfalls nicht. Ein Klick außerhalb des Dialogs auch nicht, denn das entspricht ja einem closedby="any". Ich mutmaße, dass es sich um einen Button-Klick in einem method="dialog" Form handelt, aber so recht steige ich da durch die Spec nicht durch.

Rolf