Una Kravets: What's new in Web UI

Hi Next.js Conf, My name is Una, and I'm here to talk to you today about a lot of new capabilities and APIs that have landed for web UI and browsers recently, or things that are coming down the pipeline. There have been so many changes to the way that we can write component-based responsive styles. And I wanna make sure that you know about them. So today I'm talking about just that topic,

What's new in Web UI. But I know that sometimes when I talk about some of the newer browser APIs, I get a little bit of feedback that, "Oh, but what about things I can use today?" So that's why in this talk I wanna make sure that I'm covering a range of topics, including ones that are well supported in modern browsers and ones that are coming down the pipeline just so you're aware of them because I think that they're really relevant to building components and working in component-based frameworks like Next. So about me, my name is Una, I'm a Staff Developer Relations Engineer on the Chrome team where I focus on UI and DevTools,

making sure that you have the capabilities and the tools that you need to build great interfaces. And that's why today it was so hard to pick just six of these capabilities to talk about. But I narrowed it down, to cascade layers, which is a new entry point to the CSS cascade, accent color, which lets you style form controls with one line of CSS, Subgrid, which allows for you to place items

onto a parent elements grid and really have nice uniform layouts. There's also the :has() selector, which is a really big one. This one allows for you to select parents based on their children or really their children's states or other elements in the UI depending on how you use it. So I'm excited to talk about that. And then we're getting into container queries, which is also a super powerful API that allows for you to query a parent element's size, style, or hopefully in the future state to apply changes to it's children.

And finally, I'm going to cover a more experimental topic, which is some of the open UI APIs, including ink positioning, select menu and popup, 'cause they're pretty relevant and very cool and I hope that they land well and land soon. But before I get into it, this is just how I feel about all of these big changes that are fundamentally shifting how we can write code in these component-based times. It's super, super cool. So let's start with Cascade layers. This is a new entry point for the CSS cascade

that enables cleaner CSS architecture and more control over that architecture. I will try to be brief with this one, but it is deep, it gets deep. But browser support is really good for modern browsers, it's supported in Chromium 99, Firefox 97 and Safari 15.4. So the four cascade layers, I mean this is how the CSS cascade works, where you have these different cascade entry points.

You could have your user agent styles like the styles that Chrome provides, or Safari provides, or Firefox provides. Then there's author styles, which is what you and I are writing in our code and local user style. So that would be something that might be an accessibility override or something that local user has appended to a page. And they work as different cascade entry points, with different levels of precedence. So these slides say "specific", should actually say "precedence" because precedence, and specificity, are two different concepts.

But you can sort of say like the highest precedent styles with the highest specificity win, but precedents wins over specificity. So one fun fact that you might not know is how an !important actually works. An !important doesn't just increase the specificity of a style that you apply it to, it actually inverts the cascade. So as you can see this diagram, it would invert the style's and the cascade layer's degrees of precedence. So the !important tag for any styles that you're applying as a user, would increase in specificity over your base styles