What's new in web UI

Key Takeaways

foreign hi I'm Yuna and I'm here to talk to you about what's new in web UI the past few months have ushered in a golden era for web UI 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 allowed for you to query a parent element's 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 layout shift to adjust the container query specification doesn't stop its sizing though it also includes the ability to query a parent container's 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 stylus shown here using a percent value for the chance of rain or a cloud cover pretty powerful speaking of powerful Dynamic features the hash selector is one of the most powerful new 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 check box in the checked States 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 presence or apply some styling to a pseudo element using the half 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 elements 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 hash 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 ends child syntax gives a new keyword of which lets you use the existing micro syntax of a n 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 two of special which will first pre-filter all these 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 wrap balancing for headings using the text wrap 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 drop balance the headings and subheadings are more uniform in length text wrap balance uses knuff'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 pseudoelement to specify one the size of the letter based on how many lines it occupies and two letters block offset or sync 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 V Port 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 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 lined lineating 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 Dev tools 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 scope 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 its 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 results as this this capability which is something that folks love from SAS has been one of the top CSS developer requests for years and has 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 style is 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 name spacing 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 can 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 sine and cosine functions and finally developer ergonomics continue to improve with individual transform functions since the last time that we had i o 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 is 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 in 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 are form controls still so hard to style and to make sure that we're resolving that through the web platform we're working with the open UI 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 stylable drop down menu component for when you want to customize content inside of a select the popover 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 popover or a dialogue you're promoting that element to a special layer on top of the page you also get light dismissed behavior for free so when you click outside of an element the popover dismisses removing it from the accessibility tree and managing Focus there is also some nice default accessibility for the connective tissue of the popover's Target and the popover itself and all this means less JavaScript has to be written to create all of this functionality and track all of these states the Dom structure for popover can be written as clearly as giving your popover element an ID and the popover attribute then you sync that ID to the element which would open the popover such as a button with the popover Target attribute now we have a fully functional popover popovers are also really common in elements like dialogues and Tool tips which also need to be anchored to specific elements in most cases take this event example when you click on a calendar event a dialog appears near the calendar item that you clicked on the calendar item is the anchor and the popover is the dialog which shows the event details we can create a centered tool tip 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 popover 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 can 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 popovers 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 popovers select menus and even existing elements like dialogs or custom components we're 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 already talked about anime and 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 in 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 Maxie 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 brahmisfandam'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 [Music] 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 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 and web animations talk and the how to create personalized web experiences talk for more web UI Landings and how to's I'll see you online [Music] foreign [Music]