 Hi, I'm Yuna, and I'm here to talk to you about what's new in WebUI. The past few months have ushered in a golden era for WebUI. New platform capabilities have landed with tight cross browser adoption that support more web capabilities and customization features than ever. And as a web developer who's wanted a lot of these features for years, I'm very excited about where the platform is going and really happy to be here today to shine a light on all of the hard work that the Chromium team has been up to. So join me in this under 20 minute journey as we take a look at some of the most exciting and impactful features that landed recently or are coming soon. And it is a lot of topics to cover in such a short amount of time. So look out for the QR codes on the top right corners of the screen to get more information, code samples, and demos to play with. Let's get started with some new responsive UI capabilities. With these new responsive features, users can create truly dynamic interfaces that take responsive design to the next level. New platform features let you build logical interfaces with components that own their responsive styling information, leverage system capabilities to deliver more native feeling interfaces, and let the user become a part of the design process for more personalization. Container queries recently became stable across all modern browsers and allow for you to query apparent elements size and style values to determine the styles which should be applied to any of its children. Unlike media queries, which can only access and leverage the information from the viewport and thus really only work on a page layout macro view, container queries are a more fine-tuned tool that support any number of style optimizations and layouts within layouts. In this inbox example, the primary inbox and favorite sidebar are both containers. The emails within them adjust their grid layout and show or hide the email timestamp based on available space. This is the exact same component within the page just appearing in different views. And because we have a container query, their styles are dynamic. As we readjust the page size and the macro layout shifts, they look to their individually allocated space to make styling decisions. The sidebar becomes a top bar with more space and we see the internal layouts shift to adjust. The container query specification doesn't stop at sizing, though. It also includes the ability to query apparent containers style values. This spec is currently partially implemented in Chrome 111 where you can use CSS custom properties to apply container styles. In this example, we're using weather characteristics stored in custom property values, such as rain, sunny, and cloudy, to style the card's background and indicator icon. But this is just the beginning with style queries. In the future, we'll have Boolean queries to determine if a custom property value exists to reduce code repetition. And currently in discussion are range queries to apply styles based on a range of values. This would make it possible to apply the styles shown here using a percent value for the chance of rain or cloud cover, pretty powerful. Speaking of powerful dynamic features, the has selector is one of the most powerful in the CSS capabilities landing in modern browsers. With has, you can apply styles by checking to see if a parent element contains the presence of specific children or if those children are in a specific state. This means we essentially now have a parent selector. In this element, we're giving an item that has a star element, a gray background, and an item that has a checkbox in the checked state, a blue background, all using has. But this API isn't limited to parent selection. You can also style any children within the parent as well. For example, you can make the title element bold in those items that have the star element present or apply some styling to a pseudo element. Using the has selector gives you access to parent elements, child elements, and even sibling elements using existing combinators, making this a really flexible API. One of my favorite examples of logical CSS using has is for creating quantity queries, something that we had to hack around in the past. In this example, we're leveraging the nth child pseudo element and looking to see if the inbox has n plus 11 children. If this is true and there are 11 items within the inbox, we can style the pagination bar to appear, going from display none to giving it a display value. You can use this for form error messages via invalid states, changing the layout based on the number of items in a list and many more examples. To limit rendering performance slowdowns for the has selector, we recommend that you scope it as tightly as possible. For example, try to scope has to a containing element, such as a card or nav bar rather than something more global like the HTML route, particularly on pages with large DOM trees. Building on nth child, we now also have more advanced nth child selection on the web. The advanced nth child syntax gives a new keyword, of, which lets you use the existing micro syntax of an nth child plus b with a more specific subset within which to search. For example, if you use the regular nth child syntax, such as nth child 2, on the special class, the browser will select the element that has the class special applied to it and also is the second child. This is in contrast to nth child 2 of special, which will first pre-filter all the special elements and then pick the second one from that list. Selectors and style queries aren't the only places that we can embed logic within our styles. Topography is another one. Now in Chrome Canary, you can try out text-wrapped balancing for headings using the text-wrapped property with the value balance. This enables more even headings and removes singleton lines of text. Here's what the web.dev site looks like after text-wrapped balance. The headings and subheadings are more uniform in length. Text-wrapped balance uses Knuth's text algorithm to identify the most visually balanced position for the text in a headline. While this is a great progressive enhancement that you can try out today, it's important to note that this API only works up to four lines of text, so it's great for titles and headlines, but likely not what you're looking for with longer pieces of content. Another nice improvement to web typography is initial letter. This CSS property gives you better control for inset drop cap styling. You use initial letter on the first letter pseudo element to specify, one, the size of the letter based on how many lines it occupies, and two, the letters block offset or sink for where the letter will sit. Screens and devices have also evolved over time, and so the web must keep up. One common problem web developers face today is accurate and consistent, full of viewport sizing, especially on mobile devices. We want 100 VH or 100% of the viewport height to mean be as tall as the viewport, but the VH unit doesn't account for things like the header bars and browser Chrome on mobile, so sometimes it ends up being too long and causes scroll. To resolve this issue, we now have new unit values on the web platform, including small viewport height and width, which represents the smallest active viewport size, large viewport height and width, which represents the largest size, and dynamic viewport height and width. Dynamic viewport units change in value when the additional browser Chrome, like the header or footer bar, are visible and when they're not. Another new key addition to the web platform are wide gamut color spaces. Before wide gamut color spaces became available on the web, you could take a photograph with really vivid colors and you could use it on the web, but you couldn't get a button or a text color or a background to match some of those vivid values. But now we have a range of new color spaces on the platform, including REC 2020, P3, XYZ, Lab, OK Lab, LCH and OKLCH. And you can immediately see in DevTools how the color range has expanded with that white line delineating where the SRGB range ends and where the wider gamut color range begins. And to top off the expanded color spaces, we now also have a new platform feature called Color Mix. Color Mix supports the mixing of two color values to create new values based on the channels of the colors getting mixed. The color space in which you mix affects the results. Working in a more perceptual color space like OKLCH will run through a different color range than something like SRGB. And a big win for Color Mix solves a long request capability, the ability to preserve opaque color values while adding some transparency to them. Now you can use your brand color variables while creating variations of those colors at different opacities. The way to do this is to mix the color with transparent. When you mix your brand color blue with 10% transparent, you get a 90% opaque brand color. You can see how this enables you to quickly build color systems. And you can see this in action in Chrome DevTools today with a really nice little preview Venn diagram icon. And all of these features support your ability to more easily create custom themes and tailor your web experience to your users with key moments of delight. To learn more about these moments and how to really leverage new web capabilities to create personalized UI experiences, check out Adam Argyle's talk on the subject. Building new capabilities that have clear user wins is one part of the equation, but we're also landing developer facing behind the scenes features for more reliable organized CSS architecture. These include native CSS nesting, cascade layers, scoped styles, trigonometric functions and individual transform properties. Nesting allows developers to write in a more succinct grouped format that reduces redundancy. Instead of writing card styles, card hover and it's styles, card qualifier values and their styles inside of a media query that might be in a totally separate part of your code base, you can now keep them all organized together and get the same result as this. This capability, which is something that folks love from SaaS has been one of the top CSS developer requests for years and is now finally landed in the web platform. Another developer pain point that we've identified is ensuring consistency in which styles win over others and one part of resolving this is having better control over the CSS cascade. Enter cascade layers. Cascade layers give users control over which layers have a higher precedence than others, meaning more fine-tuned control of when your styles are applied. I recently relied on cascade layers for a website that I was building, which was built on a framework that used a bundler that changed the source order of the CSS imports, causing unexpected styles to be applied. Cascade layers saved the day and let me clearly set up the source order I wanted regardless of where the styles loaded in. And the final game changing architectural update that will be coming to browsers soon is CSS scope styles using at scope. Scope allows developers to specify the boundaries for which their specific styles apply, essentially creating native namespacing in CSS. Before developers relied on third-party scripting to rename classes or specific naming conventions to prevent style collision, but soon you can use that scope. Here we're scoping a title element to a card. This would prevent that title element from conflicting with any other element on the page that has a class of title, like a blog post title or some other heading. You could also use scope for theme styles and create pass-through donut scope styles making this even more useful. Another piece of new CSS plumbing are trigonometric functions being added to the existing CSS math functions. These functions are now stable in all modern browsers and enable you to create more organic layouts on the web platform. One example is this radial menu layout, which is now possible to design and animate using sign and cosine functions. And finally, developer ergonomics continue to improve with individual transform functions. Since the last time that we had IO, individual transforms went stable across all modern browsers. In the past, you would rely on the transform function to apply sub-functions to scale, rotate, and translate a UI element. This was cumbersome and duplicitous and especially frustrating when you wanted to apply multiple transforms at different times in the animation. Now you can have all of this detail in your CSS animation by separating the types of transforms and applying them individually. The translation and rotation can happen simultaneously at different rates of change and different times during the animation, super handy. A huge frustration developers have with the web platform, which I also feel in my bones, is why our form control is still so hard to style and to make sure that we're resolving that through the web platform, we're working with the OpenUI community group and have identified three solutions to start with. The first is native pop-up functionality with built-in event handlers, a declarative DOM structure and accessible defaults. The second is a CSS API to tether two elements to each other and enable native anchor positioning. And the third is a styleable drop-down menu component for when you want to customize content inside of a select. The pop-over attribute gives elements some built-in browser support magic like top-layer support so you don't have to mess with the Z-index anymore. When you open a pop-over or a dialogue, you're promoting that element to a special layer on top of the page. You also get like dismiss behavior for free, so when you click outside of an element, the pop-over dismisses, removing it from the accessibility tree and managing focus. There's also some nice default accessibility for the connective tissue of the pop-over's target and the pop-over itself. And all of this means less JavaScript has to be written to create all of this functionality and track all of these states. The DOM structure for pop-over can be written as clearly as giving your pop-over element an ID and the pop-over attribute. Then you sync that ID to the element which would open the pop-over such as a button with the pop-over target attribute. Now we have a fully functional pop-over. Pop-overs are also really common elements like dialogues and tooltips which also need to be anchored to specific elements in most cases. Take this event example. When you click on a calendar event, a dialogue appears near the calendar item that you clicked on. The calendar item is the anchor and the pop-over is the dialogue which shows the event details. We can create a centered tooltip by leveraging the anchor function and using the width from the anchor to position the tooltip at 50% of the anchor's X position. Then we use existing positioning values to apply the rest of the placement styles. But what happens if our pop-over doesn't fit in the viewport based on the way that we've positioned it? To solve for this, the anchor positioning API includes fallback positions that you could customize yourself. Here we're creating a fallback position called flip. We want to let the browser first try positioning the tooltip at the top. And if that doesn't fit in the viewport, the browser would then position it underneath the anchoring element on the bottom. You can get really granular here, which may get verbose, but it's also an opportunity for libraries and design systems to write the positioning logic for you to reuse everywhere. Finally, with both of these behaviors, pop-over and anchor positioning, we can build fully customizable select menus. The Open UI Community Group has been exploring the core architecture of these menus and identifying ways to allow for the customization of arbitrary content within them. Take these examples. The one on the left has a color bar corresponding to calendar event colors. The center select menu shows different typography preview styles. And on the right, we have a country select showing flags for clear visibility. In the first select menu here, we have these little color dots corresponding to the event types as they would appear on your calendar. To build this using the native select menu element, we set up the button to open the select menu and give it a slot to put in the newly selected value. We insert the options, which each have a value, but also contain a figure and a paragraph. And there we have it. Remember how pop-overs support promotion to the top layer? Well, we need a way to animate that. And in order for all of this to transition in and out smoothly, the web needs some way to animate discrete properties. These are properties that typically weren't animatable in the past, such as animating to and from the top layer and animating to and from display none. As a part of the work to enable nice transitions for pop-overs, select menus and even existing elements like dialogues or custom components were enabling new plumbing to support these animations, bringing them into the flow of your animation or transition timelines, rather than swapping them at zero seconds and creating a visual break, which brings us to interactions the last stop on our speed run of web UI features. We've already talked about animating discrete properties, but there are also some really exciting APIs landing in Chrome around scroll-driven animations and view transitions. Scroll-driven animations enable you to build CSS animations that rely on a scroller rather than a timer. This API lets you build really smooth and engaging interactions on a view timeline. So you can make parallax effects, entry and exit effects, and a lot of other neat scroll-based experiences to manage user attention. And the best part is that this API is declarative and you can do it all on CSS without reaching for additional scripting. And finally, we have view transitions for single-page apps that landed in Chrome 111 this year with more capabilities for multi-page support coming soon. View transitions allow you to smoothly transition between page states and elements within a page. What I love about this demo by Maxi Ferriera is that it shows how these transitions can happen while interactive elements like video keep playing. This is a massively exciting feature that adds so much smoothness to the web platform to really elevate your web experiences and your web apps. To learn more about view transitions, scroll-driven animations, and linear easing function, be sure to watch Bromis Fandam's talk on what's new in web animations. This talk goes into much more detail about how to use these features and where they really shine. All of this adds up to a more robust and solid web platform, with less redundant scripting, more developer access to user customization, and more optimized declarative web APIs. To keep up with all of these changes and landings in the web space, follow along on developer.com.com and web.dev, where our team is constantly turning out news, tips, and tricks. And thank you for listening. Again, be sure to check out the what's new in web animations talk and the how to create personalized web experiences talk for more web UI landings and how-tos. I'll see you online.