<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.
So, you have a site that you want to build or redesign. Maybe you have a few core colors in mind, and you’re thinking about how to quickly implement a theme based on those colors. Baseline features can help!
CSS anchor positioning isn’t baseline yet, and there’s good reason for that. You can use it, but it comes with some caveats. James, Stacy, and Miriam cover new resources to make anchor positioning easier, and work through some demos to help you understand how anchor positioning works. We also look…
A web development podcast from LogRocket
I talk with Noel Minchow about the unique problems that CSS has to contend with, the internal complexities that can take us by surprise, how to think about debugging, and when to use higher level tools.