<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.
CSS properties come in two excellent flavors – longhand properties have a direct impact on the element, while shorthand properties take a much more convoluted path. There’s a lot going on when we use a shorthand property, with hidden surprises, and reasons we might use one or the other.
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…