There is also <dialog> (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...) if you want modal dialogs.
Strange that unlike <dialog open> and <details open>, `<whatever popover>` apparently lacks the the ability to be made declaratively `open` using the attribute. This feels like omission to me. I hope there is some based reasoning behind this decision.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/de...
(also possibly because the "insert into top layer" is sufficiently odd a thing to trigger that the designers felt representing it as an attribute was a worse idea than for dialog)
... though I'd really like some sort of explanation as to how to choose between "non-modal <dialog>" and popover because the one thing I am very confident of here is that I don't know enough to answer that question myself.
As I understand the line of thought around modals there it is: If it has to be declaratively opened modal on each page visit, blocking other content, it should better be an extra page anyway. (The fact it is made possible imperatively with JS is considered "necessary evil" as I understand it.) The same presumably applies for popover; default-open popover could probably make sense in application that uses JS anyway, not a static document. (?)
Nuances of distinction between popover and non-modal dialog I have to explore.
- Goodbye z-index, since the last opened dialog always get's promoted to the top in #top-layer [1] - Free focus handling, it doesn't trap focus inside dialog but that's kinda opinionated anyway [2] - styling and animation is EASY with `@starting-style` and `allow-discrete` and can even use view-transitions [3]
Here's a basic sliding in drawer with blurred background I have in svelte:
<style> dialog::backdrop { backdrop-filter: blur(4px); }
/* IS-OPEN STATE / dialog[open] { translate: 0 0; }
/ EXIT STATE / dialog { transition: translate 0.2s ease-out, overlay 0.2s ease-out, display 0.2s ease-out allow-discrete; translate: 384px 0; }
/ 0. BEFORE-OPEN STATE */ @starting-style { dialog[open] { translate: 384px 0; } } </style> ```
Some of the features are not yet available in firefox and safari but they are coming soon and they have minimal workarounds available now [4] for animating `display: none` etc. So, I'd say it's time we retire that quirky UI library's dialog.
[1] https://developer.chrome.com/blog/what-is-the-top-layer [2] https://github.com/whatwg/html/issues/8339 [3] https://developer.chrome.com/blog/entry-exit-animations [4] https://codepen.io/kevinpowell/pen/QWaBeGm
Ubuntu itself doesn’t have an ESR package, only https://packages.ubuntu.com/focal/firefox which is at 125.
The Mozilla PPA does have an ESR package, but per https://launchpad.net/~mozillateam/+archive/ubuntu/ppa?field... it’s at 115.
<dialog> has been supported since Firefox 98, meaning ESR 91 was the last release lacking it, and it reached end of support over a year and a half ago.