<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.
From image sharing sites to online stores, image galleries are a common pattern on the web. Images can be very data heavy, and loading images can make the page take a long time to load. In addition, users have high expectations around the usability of galleries, so it’s common to…
Building a type scale for your website
Miriam has spent a lot of time digging into the different approaches, the math involved, the user implications, and the ways modern CSS can help us out. There are equations and graphs! But you don’t need anything that complicated to build a type scale for your next site. With the…
One of the goals when writing CSS is to build component parts that will adapt well to different (and unexpected) contexts. Ideally, a component can be placed inside any “container” element without it feeling broken or out of place. How can you accomplish this in a complex layout like a…