dialogawesome

vor 2 Jahrendiscuss

With that attitude I ain't implementing special hacky workarounds for Safari anymore /s but in all seriousness why? barring developers with malicious intent most developers would just want cross-platform tooling, open systems and less friction in making apps all of which modern web provides and with PWA the experience is even more pleasant as long as relevant API's are available. But when you have a single browser engine preventing this experience it's simply not right. I don't want to code my app twice especially since I don't need the native performance.

dialogawesome

vor 2 Jahrendiscuss

I don't agree as I have converted all the modals/dialog in my web app to <dialog> and boy it has been a breeze. A few killer features:

- 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

comments