I’m just hearing about the closedby=”any” attribute/value for <dialog>. HTML popovers have this “light dismiss” behavior where you can “click outside” to close them, but not dialogs (until this). I forked a previous demo to try it and it works great (in Chrome & Firefox, just waiting for Safari). I’ve been using a custom <ClickOutsideDetector […]
Got an old “modal” design? Now might be the time to upgrade it to a
Sometimes pretty simple HTML elements have a lot of things to consider and take care of, from interactivity, styling, accessibility, and more.
Accordion details, toggle switches, styleable selects, responsive video, and more!
They are pretty similar in both look and functionality, but are have some important differences, slightly different APIs, and functionality. The use cases are also a bit different, so let’s have a look!
It’s not that modals are all automatically bad, it’s that, as Adrian Egger says, “modals are the crutch of the inarticulate design and developer” and they “are easily replaced with other patterns that are less jarring.” on the dedicated site for this crusade: modalzmodalzmodalz.com. Adrian’s personal site is sweet, too.
Now that we’re starting to see better support for @starting-style and the allow-discrete keyword, we’ve got a pretty straightforward way for defining *different* entry and exit states.
I’m first hearing about the CloseWatcher API after running across Abdelrahman Awad’s blog post about it. The MDN docs are quite direct, making the purpose clear: Some UI components have “close behavior”, meaning that the component appears, and the user can close it when they are finished with it. For example: sidebars, popups, dialogs, or […]
It might seem like you could just set a transition on the opacity of the dialog element in CSS from 0 to 1, but it doesn’t work. You’ll need to learn about @starting-style, and the overlay and allow-discrete keywords.
Dropdowns, menus, tooltips, comboboxes, toasts — the popover attribute will make building a large variety of UI components easier. The popover attribute can be used on any HTML element, so you have the flexibility to choose whichever element is most appropriate semantically for each particular use case. Unlike a dialog, a popover is always non-modal […]
Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.
