📝 CSS-Tricks 240: The Popup Element

View this newsletter on the web.

[Robin]: The first thing that caught my eye this week was this new HTML element called <popup>. Šime Vidas wrote about this in the Weekly Platform News:

A popup is a temporary (transient) and “light-dismissable” UI element that is displayed on the the “top layer” of all other elements. The goal for the <popup> element is to be fully stylable and accessible by default. A <popup> can be anchored to an activating element, such as a button, but it can also be a standalone element that is displayed on page load (e.g., a teaching UI).

There’s an “intent to prototype” right now which sure is exciting! I think elements like <popup> should replace a ton of third-party code from our codebases and make this pattern more accessible and easier to build.

What new HTML elements might we see in the future like this though?

The answer to that question is most likely to come from design systems (like the Design Systems Repo) where we can see common UI patterns emerge. These components—like modals, toasts, popovers, and tooltips—should lay the groundwork for new HTML elements that we need in the future.

[Chris]: Remember last time Google kicked a new HTML element right to “intent to prototype” out of nowhere? It was <toast> and people were proper pissed off about it. I’m sure I’m missing some nuance here, but at a glance, I’m not seeing the difference in approach. All I’m seeing is excitement from the general community. I only heard one tiny bit of pushback in a private conversation where an engineer was essentially disappointed that new’n’shiny was getting attention when things like <dialog> are a mess. Maybe people are so ready for HTML to start evolving they’ll take whatever they can get.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s