<dialog> and popover
Elements and windows that pop up on the screen are one of the most common patterns on the web. With use cases spanning from alerts and brief forms requesting data, to the now ubiquitous cookie settings prompt, these layered UI patterns are used frequently by developers.
Most of these user interface elements are added to web applications using either custom JavaScript or common libraries. With that route there’s a lot to make sure that you or the library you choose gets right.
The <dialog> element
and the popover attribute
are two Baseline layered UI patterns
that developers can reach
for instead of custom implementations.
To show the advantages
of using layered UI patterns built
into today’s web browsers –
and to give an example
of when you might reach for <dialog>
or use the popover attribute –
this article walks through
an example of a modal
that appears when the user attempts
to save an image
to a favorites list without being logged in.
<dialog>popover, rising to the top::backdrop@starting-styleSee the Pen Baseline dialog demo by @web-dot-dev on CodePen.
Brad chats with Miriam Suzanne about pottery, theater, CSS, and why we shouldn’t just accept AI as the way. Miriam describes their through-line as collaborative creativity across pottery, theater, client work, and CSS standards, arguing process shapes results and that CSS is inherently collaborative with users, browsers, and devices.
Miriam and Stacy troubleshoot an issue with the dev tools available in each browser, exploring the differences and what each browser’s tools do best.
This long-debated solution for masonry layout is now available and it’s time to figure out how to use it. Join us for a deep dive into the workings of Grid Lanes.