"Added an update mentioning my favourite open source image lightbox that, to my surprise, has this feature built-in. In a recent project I was wondering if I can combine two of my favourite modern web features: view transitions and the <dialog> element. Turns out it's possible and not too complicated. First, here's the finished result. Click on a card cat to open the dialog with a smooth transition. You can also try keyboard navigation by tabbing and pressing the enter or space button:"
"This feature is incredible. In my otherwise ranty article "Trusting the browser" I already mentioned how much I love using the <dialog> element. It has a lot of built-in features that make it accessible and user friendly by default. Apart from all the things that come with it for free, like focus management and the top-layer positioning, there's also an optional closedby="any" attribute that makes it easy to close dialogs by clicking outside."
"To open a dialog, you call its showModal() method. This puts it on the top layer and traps focus inside. For closing, there's dialog.close(). If the user clicks outside a closedby="any" dialog or presses Esc, the browser does the closing for you. While the <dialog> element works across browsers nowadays, the closedby attribute is not supported by Safari yet (come on, Apple!). If you have a close button, I'd consider it progressive enhancement in most cases."
View transitions enable animated changes between element states, even across documents, allowing smooth visual continuity. The <dialog> element offers built-in accessibility like focus management, top-layer positioning, and an optional closedby="any" attribute to close dialogs by clicking outside. Developers open dialogs with showModal() and close them with dialog.close(); browsers handle outside clicks and Esc for closedby="any" dialogs. Safari does not yet support closedby, so providing a visible close button is a practical progressive enhancement. View transitions can be combined with dialogs to produce smooth, keyboard-accessible dialog openings and closings using standard APIs.
Read at Medienbaecker
Unable to calculate read time
Collection
[
|
...
]