The latest in Web UI (Google I/O ‘24)

Summary

The video script by Yuna, a member of the Chrome team, delivers an enthusiastic presentation on the latest advancements in CSS UI components and interactions for web development. She discusses the importance of evolving web capabilities to meet user needs and highlights the team's focus on three key objectives: enhancing the smoothness of web navigation, simplifying UI component creation and styling, and improving the overall quality of life for developers. Yuna introduces new features such as native scroll-driven animations, view transitions for seamless page interactions, and the popover attribute for creating UI components like dropdown menus more easily. She also touches on the future of web development with cross-document view transitions, advanced styling capabilities for form controls, and the potential for more intuitive and responsive web design. The talk is a celebration of the current 'golden era' for web UI and a glimpse into the future possibilities that these new features unlock for developers and users alike.

Takeaways

• 🎨 **CSS UI Components Evolution**: The web platform is continually evolving with new CSS UI components and interactions that enhance user engagement and successful product use.
• 🌐 **Golden Era for WebUI**: Web developers are experiencing a golden era for WebUI with features like container queries and advanced selectors that were once considered impossible now being implemented.
• 🚀 **Performance Improvements**: Native scroll-driven animations and view transitions are being introduced to improve performance by reducing reliance on custom scripts and third-party dependencies.
• 🔄 **Progressive Enhancement**: New features support progressive enhancement, ensuring that users on unsupported browsers still receive a default experience, while those on supported browsers get enhanced interactivity.
• 🌟 **View Transitions**: Airbnb and other companies are leveraging view transitions for smoother web navigations, and the technology is expanding to support cross-document transitions for multi-page applications.
• 📐 **Anchor Positioning**: A new CSS function allows for native anchor positioning, making it easier to create UI components like dropdowns and menus without complex scripting.
• 📊 **Form Controls Styling**: Efforts are being made to allow easier customization and styling of form controls like dropdowns, with new HTML and CSS features being proposed and experimented with.
• 🎭 **Popover API**: The popover attribute simplifies the creation of popovers and dropdown menus, with GitHub already implementing it to reduce code and improve accessibility.
• 📝 **Quality of Life Improvements**: There have been numerous smaller updates that improve the quality of life for developers, such as native CSS nesting, text layout improvements, and responsive design enhancements.
• 🌈 **Color Theming**: Relative color syntax and the light-dark function have made color theming more dynamic and easier to implement, providing a more ergonomic approach to theme styling.
• 📖 **Logical Selectors**: The `:has()` selector is a game-changer for logical styling, allowing for parent selector functionality and reducing the need for JavaScript in many cases.

Q & A

What are the core capabilities that bring websites to life according to Yuna?

The core capabilities that bring websites to life are the latest landings in CSS UI components and interactions for the web platform, which create a surface for users to interact with and successfully use the product.

What is the significance of the 'golden era for web UI' mentioned by Yuna?

The 'golden era for web UI' signifies a period where new features are landing across browsers at an unprecedented pace, unlocking capabilities like intrinsically responsive design with container queries, logical components using advanced selectors, and dynamic color theming.

What are the three primary objectives the Chrome team focused on for the web platform in the mentioned year?

The three primary objectives are: making the web feel super smooth with native scroll driven animations and view transitions, making it easy to build UI components and style them with interaction patterns, and resolving paper cuts to improve the quality of life for web developers from layout to architecture.

How does the native scroll driven animations API work?

The native scroll driven animations API allows developers to create scroll-based animations without relying on scroll observers or heavy scripting. It uses a scroll progress to start, pause, and reverse an animation, enabling the creation of partial or full page visuals with elements animating into and within the viewport.

What is the purpose of the Baseline initiative?

The Baseline initiative aims to provide better clarity on browser feature availability. Features discussed in the talk are either Baseline newly available, meaning supported by all major browser engines and interoperable, or not yet available across browsers.

How can view transitions enhance user experience in single page applications?

View transitions can create a seamless user experience by animating between web pages. They can be used for smooth navigations, updating list views on user interactions, and providing a fluid user flow, making the web more engaging without the need for third-party scripting.

What is the benefit of using the new CSS view transition types?

CSS view transition types allow for different kinds of visual transitions when animating to and from page views. This enables developers to customize the transition experience based on the context, leading to a more tailored and user-friendly interaction.

What is the significance of the new cross document view transitions feature?

Cross document view transitions allow for multi-page application support, enabling smooth transitions between pages that live within the same origin. This feature enhances the user experience by providing a more integrated and interactive web journey.

How does the popover attribute simplify the creation of popovers in web applications?

The popover attribute, when set on an element and linked to a button with the popover target, creates a basic popover that the browser handles natively. This includes behaviors like light dismiss functionality, tab focus management, and keyboard bindings, eliminating the need for JavaScript and reducing code complexity.

What is the role of the anchor positioning API in creating UI components?

The anchor positioning API allows developers to tether two elements to each other with just a few lines of code. It can be used to create anchored elements like menus, submenus, and tooltips that respond dynamically to the movement of their anchor elements, enhancing the visual relationship and user interaction.

What are the potential future enhancements for the popover API?

Future enhancements for the popover API include the introduction of interest Target to trigger popovers from user interactions like hover or tab focus, and an additional General invoker called invoke Target that supports a declarative developer experience for all interactive elements.

Outlines

00:00

🌟 Introduction to CSS UI Components and Web Platform Evolution

Yuna introduces the topic of the latest advancements in CSS UI components and interactions, emphasizing the importance of the web platform's evolution to meet user needs. She mentions the 'golden era' for web UI, highlighting new features like container queries, advanced selectors, and dynamic color theming. The focus for the year includes improving web smoothness, UI component building, and resolving minor issues to enhance developer quality of life. The Baseline initiative is also introduced, aiming to clarify browser feature availability.

05:00

🎨 Scroll-Driven Animations for Enhanced Web Interactions

The paragraph delves into scroll-driven animations, a new API that allows for creating scroll-based animations without heavy scripting. It discusses how this feature enables developers to build animations that progress with the scroll direction, enhancing user interactions. The technique is shown to be beneficial for progressive enhancement, with the ability to provide an enhanced experience to supported browsers while maintaining a default experience for others. Tokopedia's use case is highlighted, demonstrating the feature's impact on code management and performance.

10:01

🔄 View Transitions for Seamless Web Page Animations

View transitions are introduced as a feature for animating between web pages, aiming to create a seamless user experience. The implementation of view transitions in single-page applications is discussed, along with the simplification of the process using new updates. The support for view transition types is also covered, allowing for different visual transitions based on the page being navigated to or from. Airbnb's integration of view transitions is used as an example. The future of view transitions, including cross-document transitions and new JavaScript events, is teased.

15:03

🌐 Cross-Document View Transitions for Multi-Page Applications

The announcement of cross-document view transitions for multi-page application support is made, highlighting the ability to transition between pages within the same origin. The difference between same-document and cross-document view transitions is explained, along with the new CSS rule for handling view transitions. The use of JavaScript events for custom effects and the potential for scoped transitions and gesture-driven transitions are also discussed.

20:04

🛠 Building UI Components with Improved Styling and Interaction

The challenges of customizing and styling form controls are addressed, with the introduction of new primitives to simplify the process. The 'popover' attribute is highlighted for creating popovers with built-in behaviors like light dismiss functionality and keyboard bindings. The future of the popover API, including the 'interest-target' concept, is also mentioned. Native anchor positioning is introduced as a new feature for tethering elements, demonstrated with a tooltip example.

25:06

🔄 Advanced Anchor Positioning and Responsive UI Elements

The paragraph discusses advanced anchor positioning, including the use of the 'anchor' function in CSS for creating visual relationships between elements. The 'inset area' layout mechanism and logical properties for positioning are introduced. The concept of dynamic movement of anchored elements as their anchor moves is explained. The browser's ability to handle positioning rules and transitions for responsive UI elements is also covered.

30:08

🎯 Future of Popover API and Styling of Dropdowns

The future direction of the popover API is discussed, including the 'interest-target' feature for triggering popovers from user interactions like hover or tab focus. The 'invoke-target' concept is introduced for a broader range of interactive elements. The ongoing work on styling dropdowns is highlighted, with the mention of an experimental API for customizable selects, including new HTML elements and CSS properties for styling.

35:10

📋 UI Component Improvements and Quality of Life Updates

Various UI component improvements and quality of life updates are summarized, including the creation of exclusive accordions, user-valid and user-invalid pseudo-classes, field sizing content, and the ability to add HR elements in selects. The impact of these features on developer experience and the reduction of scripting requirements is emphasized.

40:13

🌈 CSS Theming, Logical Styling, and New CSS Features

The paragraph covers updates in CSS theming with relative color syntax and the light dark function for theme styles. The impact of the ':has' selector for logical styling is discussed, along with the benefits for companies like PolicyBazaar. The landing of container queries and the upcoming '@property' feature for CSS custom properties are mentioned, highlighting their potential for new interactions and robust features in CSS.

45:13

🚀 Conclusion and Invitation to Explore New Web Technologies

The conclusion of the presentation invites web developers to explore new web technologies such as scroll-driven animations, view transitions, anchor positioning, and styleable selects. It emphasizes the importance of the developer community's voice in prioritizing and bringing new capabilities to life. The speaker expresses excitement for the future of web development and encourages the audience to provide feedback and engage with the Chrome team.

Keywords

💡CSS UI components

CSS UI components refer to the visual elements used to create user interfaces on the web. In the video, Yuna discusses the latest advancements in these components, which are crucial for enhancing user interaction and the overall look and feel of websites. The script mentions features like native scroll-driven animations and view transitions, which are part of the ongoing evolution to meet user needs and improve the web platform.

💡Intrinsically responsive design

Intrinsically responsive design is an approach to web design that allows elements to adapt and respond to their content size, rather than relying on the viewport size. Yuna highlights the feature of container queries as a highly anticipated addition to CSS that enables this design approach. It allows developers to apply styles based on the size of the container element, which is a significant shift from the traditional use of media queries.

💡Logical components

Logical components in the context of web development refer to the use of advanced CSS selectors to style elements based on their logical relationships within the DOM (Document Object Model). Yuna mentions that logical components are now possible with new CSS functionalities, which enable developers to perform complex styling tasks such as parent selection, thus improving the capabilities of styling on the web platform.

💡Dynamic color theming

Dynamic color theming is the ability to create adaptive and responsive color schemes for web interfaces. Yuna discusses new color spaces and color functions that support dynamic color theming, allowing developers to build theme systems from just a few variables. This feature enhances the accessibility of interfaces and provides a more engaging user experience by allowing color schemes to adapt to different contexts or user preferences.

💡Scroll-driven animations

Scroll-driven animations are a new feature in CSS that allows for animations to be triggered and controlled based on the user's scroll position. Yuna provides an example of how this can be used to create engaging visual effects that respond to scrolling, such as animating elements as they enter the viewport. This feature contributes to a more dynamic and interactive web experience without the need for heavy scripting.

💡View transitions

View transitions are animations that occur when moving between different views or pages on a website, aiming to create a seamless user experience. Yuna explains how view transitions can be implemented using the `document.startViewTransition` method and custom animations. This feature is particularly useful for single-page applications and can enhance user engagement through smooth transitions between content.

💡Popover

A popover, as discussed in the video, is a user interface element that appears when a user interacts with a trigger element, like a button. Yuna introduces the `popover` attribute, which simplifies the creation of popovers by handling key behaviors such as display management, dismissal on outside clicks, and keyboard navigation. This feature is part of the effort to make building UI components more straightforward and accessible for web developers.

💡Anchor positioning

Anchor positioning is a CSS technique that allows elements to be positioned relative to other elements, known as anchors. Yuna mentions the new `anchor` function in CSS, which can be used to tether UI components to specific points on the page, creating a visual connection between related elements. This feature is powerful for creating interactive and dynamic UIs, such as menus and submenus, without complex scripting.

💡Native form controls styling

Native form controls styling refers to the ability to customize the appearance of HTML form elements, such as dropdowns and checkboxes, without losing their native functionality. Yuna discusses the challenges and ongoing work to allow developers to style these elements easily. The script mentions the `appearance` property and `selected option` element as part of the solution to enable extensive customization while maintaining accessibility and user experience.

💡Quality of life improvements

Quality of life improvements in the context of web development refer to updates and features that streamline the process of building websites, making it more efficient and enjoyable for developers. Yuna highlights several such improvements, including native CSS nesting, text layout enhancements, and the `:has` selector, which reduce the need for complex workarounds and allow developers to focus on creating better user experiences.

💡Container queries

Container queries are a CSS feature that allows styles to be applied based on the size of an element's content, rather than the size of the viewport. Yuna notes that container queries have landed as a feature, offering a more granular level of control over responsive design. This feature is significant for creating layouts that adapt to the size of their container, leading to more flexible and intrinsically responsive web design.

Highlights

CSS UI components and interactions are evolving to meet user needs and improve the web platform.

The Chrome team is focused on making the web platform smoother, easier for building UI components, and resolving minor issues to improve developer quality of life.

Native scroll-driven animations allow for creating scroll-based animations without heavy scripting.

View transitions provide a seamless user experience when navigating between web pages.

Cross-document view transitions support multi-page applications for a more robust web experience.

The popover attribute simplifies creating popovers for menus and tooltips without JavaScript.

Native anchor positioning allows developers to easily tether two elements together.

Inset area is a new layout mechanism for placing elements relative to their anchors on a nine-cell grid.

CSS nesting has improved to support lookahead nesting, making component styling more ergonomic.

The `:has` selector allows for logical styling based on the presence of children or their state.

Container queries enable styling based on an element's intrinsic size, offering more precision than media queries.

The `@property` rule in CSS provides semantic meaning to custom properties and enables new interactions.

Logical components using advanced selectors and dynamic color theming with new color spaces are now available.

The `light-dark()` function simplifies theme styling and makes it more concise.

Field sizing content allows form inputs to grow or shrink based on their content.

The exclusive accordion pattern enables an accordion where only one item is visible at a time.

User-valid and user-invalid pseudo-classes provide feedback based on user interaction with form inputs.

The addition of HR elements in `<select>` improves content separation within select lists.

Transcripts

hello

[Music]

everyone I love you already um welcome

web developers I'm so happy to have you

here my name is Yuna and I'm very

excited to be here today to talk about

the latest Landings in CSS UI components

and interactions for the web platform

these are the core capabilities that

really bring your websites to life

creating a surface for your users to

interact with and to successfully use

your product which is why it's so

important and critical that the web

keeps evolving to meet these user needs

and continually improve so I'm thrilled

that on the Chrome team we're working on

making the web platform a better place

for users and for the developers that

build for

it last year we talked about how we're

in a golden era for webui

with new features Landing across

browsers at a pace that we've never seen

before unlocking things like

intrinsically responsive design with

container queries which was a highly

anticipated feature and has finally

landed logical components using Advanced

selectors enabling the previously

impossible task of parent selection and

more complex styling

capabilities and dynamic color theming

with new color spaces and color

functions supporting the ability to

build accessible interfaces and build

theme systems from just a few variables

this year we haven't slowed down at all

in fact we've continued to build on our

investment in creating the powerful

robust web platform that you

deserve we've had a focus on three

primary objectives the first is to make

the web feel super smooth as users

navigate the web platform and this

includes native scroll driven animations

and view

transitions the second is to finally

make it easy to build UI components and

style them which includes interaction

patterns like click away to dismiss and

supporting positioning Logic for

anchoring elements together these are

core features that are platform gaps

which shouldn't be so hard to

implement and the third is resolving

paper cuts and continually improving

quality of life for web developers from

layout to architecture these are the

areas that we just wish were a little

easier to manage like writing nested

Styles and international typography that

just works or being able to style Things

based on the number of children that

they have without resorting to added

scripting these are the kinds of

problems that we're solving to build a

better web so I'm excited to get into

some of the new features that we've

landed that have landed in other

browsers to reach Baseline newly

available and talk about what we're

Landing next speaking of Baseline this

is a cross functional initiative to

provide better Clarity on browser

feature availability features in this

talk will either be Baseline newly

available meaning that the feature is

supported by all major browser engines

recently and therefore interoperable or

not yet available across browsers so

let's get into it a web experience is

fundamentally a call and response

between you and your users and that's

why it's so important to invest in

quality web experiences and user

interactions and it shouldn't be so hard

to build these robust engaging

interactions with the native web

platform no added third-party scripting

to manage or to slow down Optimal

Performance so we've been working on

some really big improvements that unlock

capabilities that we've never had before

on the web platform for navigating

within and between page

views the first is native scroll driven

animations like the name implies this

new API enables developers to create

scroll based animations without relying

on scroll observers or other heavy

scripting similar to how time-based

animations work on the platform you can

now use a scroller scroll progress to

start pause and reverse an animation so

as you scroll forward you see that the

animation progresses and as you scroll

backwards it'll go the other way around

this lets you create partial or full

page visuals with elements animating

into and within the viewport also known

as scrolly telling for dynamic visual

impact you can also build more subtle

effects like this animation of images as

they enter the viewport and this can be

done with just a few lines of code

declaratively in CSS along with the rest

of your

Styles first you set up a CSS animation

using key frames like any other

animation effect and then use the

animation property to attach it the

differences start here where instead of

setting a Time based duration like 1

second you set an animation timeline in

this case we're using the view function

with its default values to track the

image relative to the scroll Port which

in this instance is also the

viewport and we want this to happen from

the moment the image is partially in

view up to the point where it's in the

center of the scroller at 50% and you

can do this by setting the animation

range so that the scroll D animation

only occurs in a segment of the entire

view timeline

range you can animate images elements

text or really anything in your view as

you scroll and this demo adds a little

bit more Dimension with a translation as

it scales in and the Shadows get

deeper one reason I particularly love

this technique of animating elements is

that it lends itself so nicely to

Progressive enhancement this means that

unsupported browsers will get the

default user experience while users on

supported browsers will see that little

bit of enhanced

interactivity you can use a CSS at

supports rule to ensure that only

developers on supported browsers get

this enhanced

animation and you can combine this with

a user preference query to ensure that

users with preferred reduced motion

don't see this higher level of

interactivity scroll driven animations

can mean full page scrolly telling

experiences but they can also mean more

subtle animations like a header bar

minimizing and showing a Shadow as you

scroll a web

app this demo is created by making a few

different key frame animations for the

header the text the nav bar and the

background and then applying respective

scroll driven animations to

each while they each have a different

animation style each of the these get

the same animation timeline the nearest

scroller in this case and the same

animation range from the top of the page

to 150 pixels

not only does this native API reduce a

code burden that you'd need to maintain

whether that's custom script that you

wrote or via an additional third-party

dependency but it also removes the need

to ship various scroll observers meaning

some pretty significant performance

benefits and this is because scroll D

animations work off the main thread when

animating properties that can be

animated on the compositor like

transforms and opacity whether you're

using the new API directly in CSS or via

the JavaScript

hooks tokopedia recently used scroll

driven animations to enable the product

navigation bar to appear as you scrolled

using the native API has had some

serious benefits both for code

management and for

performance because it eliminated the

need for third-party scripting they were

able to reduce the over the overhead and

maintenance for this feature by

eliminating 8 0% of their scroll driven

interactions code Additionally the

tokopedia team saw significant

performance improvements in CPU

utilization reducing it from 50% to 2%

while

scrolling we know these effects will

continue to make the web a more engaging

place and we're already thinking about

what might come next including the

ability to not just use new animation

timelines but to also use a scroll point

to trigger the the start of an animation

and you've likely seen effects like this

all over the web we hope to make this a

reality as an addition to this powerful

feature set in the months to

come and there are even more scroll

features coming to browsers in the

future this demo by Adam Argyle shows a

combination of these features CSS scroll

start Target to set the initial date and

time within the pickers and the

JavaScript snap changed event to update

the header date making it trivial to

synchronize the data with the snapped

event you can build on this to update a

picker in real time with the JavaScript

snap changing event like you see here

while these features are only currently

available in Canary behind a flag they

unlock capabilities previously

impossible or very difficult to build in

the platform and highlight the future of

scroll based interactions

possibilities and the tooling for these

features has had a nice Improvement

recently as well well the def tools

animations panel now supports the

ability to inspect scroll driven

animations see their start times

relative to each other and relative to

the scroller and to scrub through the

timeline this visual representation

along with the new more declarative API

makes working with scroll driven

animations so much

easier to learn more about getting

started with scroll driven animations

our team just launched a new video

series that you can find on the Chrome

for Developers YouTube

channel here you'll learn the basics of

scroll driven animations from brahmas

vam who's sitting in the front row here

including how the feature Works

vocabulary various ways to create

effects and how to combine effects to

build Rich experiences it's a great

video series I highly recommend that you

check it

out we've just covered a powerful new

feature for animating within web pages

but there's also a powerful new feature

called view transitions for animating

between web pages to create a seamless

user

experience you might want to transition

some small text in a card from one view

into a larger title on the next view or

animate a preview image into the

following page for a nice user

experience Airbnb is one of the

companies who has already been leading

the road with experimenting and

integrating view transitions into their

UI for a really smooth and Seamless Web

navigations experience from the listing

editor sidebar right into editing photos

and adding amenities all within this

really nice fluid user

flow or maybe you're not switching

between pages and you just have a micro

interaction where your list view is

getting updated on a user interaction

this effect can be seamlessly achieved

by using view transitions

and the way to quickly enable view

transitions in your single page

application is as simple as wrapping an

interaction using document. start viw

transition and making sure that each

element that is transitioning has a view

transition name like so which you can do

inline or dynamically using JavaScript

as you create the Dom

nodes which can then also be used to

apply custom animations to your view

transition

but this can get kind of cumbersome so

the First new update to view transitions

this year luckily simplifies this

problem and introduces the ability to

create view transition classes that can

be applied to custom

animations and support begins in

chromium

125 another big Improvement for view

transitions is support for view

transition types view transition types

are useful when you want a different

kind of visual view transition when

animating to and from page views for

example you might want a homepage to

animate into a Blog Page in a different

way than you want that blog page to

animate back to the homepage or you

might want pages to swap in and out in

different ways like in this example

going from left to right and vice versa

before this was pretty messy to do you

could add classes to the Dom to apply

these Styles but then you would have to

remove the classes afterward and manage

all of that yourself

view transition types solve this problem

you can set up types within your

document. start view transition function

which now accepts an object update is

the Callback function that updates the

Dom and types is an array with the types

another advantage of types is that it

enables the browser to clean up old

transitions instead of requiring you to

do this manually before initiating the

new

transitions what makes the web so

powerful is how expansive it is many

applications are not just a single page

but a robust tapestry containing

multiple pages and that's why we're so

excited to announce today that we're

shipping cross document VI transitions

for multi-page application support in

chromium

126 this yeah this is an exciting

one this is the final and most exciting

addition to view transitions on the web

platform this new cross document feature

sets set includes web experiences that

live within the same origin like

navigating from web.dev to web.dev

blog but this does not include

navigating cross origin such as

navigating from web.dev to blog. web.dev

or to another domain like

google.com one of the key differences

with same document view transitions is

that you no longer need to wrap your

transition in document. start view

transition instead you would opt in both

of the pages involved in the view

transition by using the CSS view

transition at Rule now the page

navigation itself is the trigger that

runs the view

transition for a more custom effect you

can also hook in Via JavaScript using

the new page swap or page reveal event

listeners which give you access to the

view transition object with page swap

you can do some last minute changes on

the outgoing page right before the old

snapshots get taken and with page RW whe

you can customize the new page before it

begins to render after it has been

initialized and finally to put it all

together in this demo you can see that

both the names and profile pictures are

animating between page views and note

how the URL bar updates as well these

are multi-page view transitions in

action this effect is created by using

both the page reveal and the page stop

events along with some other page data

and custom animation

and this is just a quick glimpse into

the code snippet a part of it behind it

all the feature is bright for view

transitions with more exploration and

iteration happening to bring even more

features including scoped transitions

which allow you to limit a transition to

a Dom subtree enabling the rest of the

page to continue to be interactive and

supporting multiple view transitions at

the same

time the next one is gestur driven view

transitions which support dragging or

swipe gestures uh to trigger a cross

doent view transition for more native

like experiences on the web and finally

in the future we'll have navigation

matching in CSS which lets you customize

your cross document view transitions

directly in your CSS as an alternative

to using the page Swap and Page reval

events in

JavaScript to learn more about view

transitions from multi-page applications

including how to most performant set

them up with pre-rendering check out

bramis Van Dam's talk multi-page

application view transitions are here on

the Chrome for Developers YouTube

channel and now let's talk about

building UI

components this morning you heard about

how our goal is to build a powerful web

made easier and I think a lot of the

advancements in the UI interaction space

have certainly aligned with this goal

but when we talk to developers and ask

what folks are struggling with the

answer is often customizing and styling

Forum

controls who here has dealt with that

yeah yeah that's like everybody and we

hear you as a frustrated front end

developer I also asked myself this

question in

2017 why can we still not style form

controls and

dropdowns changing a font or adding a

little flag icon to improve user parsing

shouldn't mean that you have to

completely rip out your code and build a

drop down element out of divs adding

scripts to manage the navigation

interaction States and event changes

then you also have to add those

multimodal user inputs and additional

accessibility properties to make it all

work well it's just too hard to do this

right luckily I found myself on the

Chrome team just a few years later and

with the cooperation of multiple

Community groups and standards bodies

where working on a solution this is a

complex problem touching so many pieces

of the platform from layout and

rendering to scroll and interaction to

user agent styling in CSS properties and

even changes to HTML

itself a drop down alone consists of

many pieces like an open Button a

selected value an arrow indicator a data

list of options that's anchored to that

opening button and this is just a simple

drop down and the key states that you

have to handle are keyboard bindings to

enter and exit the navigation and to

navigate that interaction dismiss

capabilities when you click away the

ability to close other dropdowns when

you open one tab Focus management into

the dropdown when you open it and many

other small

details so obviously it's really painful

to do this by hand but the platform

doesn't make it easy either to fix this

we broke down those pieces and we

shipping a few primitive features that

will enable styling dropdowns would also

do so much more first we shipped a

global attribute called popover which

I'm excited to announce just reached

Baseline newly available status a few

weeks ago popover elements are hidden

via display none until opened with an

invoker to create a basic popover you

would simply set the popover attribute

on said popover and Link its ID to a

button with popover Target now the

button is the invoker which opens the

popover and this is all you need to

create this basic popover with the

popover attribute now enabled the

browser handles many of those key

behaviors that I just mentioned this

includes promotion to the top layer

which is a separate layer above the rest

of the page so you don't have to worry

about handling Z indexes anymore light

dismiss functionality we're clicking

outside of the popover area will

optionally close the popover and return

Focus there's also default tab Focus

management since opening the popover

makes the next tab stop inside the

popover regardless of where it is on the

page it does not have to be a sibling to

the element that's invoking

it these

are I know it's so hard to do this we

need to make it easier it also has

built-in keyboard bindings where hitting

the Escape key will uh exit the popover

or double toggling will return focus and

exit the popover and finally um default

component bindings as the browser will

semantically connect a popover to its

trigger so you get all of this with one

attribute all you need is the popover

attribute popover Target and an ID on

your popover no JavaScript required

[Applause]

it is important to note that popover

does not have any inherent semantic

meaning so you still need to use the

proper HTML structures and Arya to

provide more contextual meaning for what

the popover element actually is and

additionally popover does not inert the

rest of the page so that means that it

does not make the rest of the page

non-interactive you can use it for menus

tool tips and other elements if you do

want to focus trap and make the rest of

the page non- interactive you might want

to use a dialog El element and you can

do a lot of similar things with those

two

features you might even be using the

popover API today without realizing it

because gith help implemented popover on

their homepage for their new menu and in

their pull request overview

progressively enhancing this feature

today already and using a polyfill built

by oddbird with some significant support

from github's own keep Circle to support

older

browsers it's pretty awesome to to see

this in the wild and to see a team so

dedicated to Great UI deeply invested in

the success of this API and it's clear

why as it's already had a huge impact

for the GitHub team they've been able to

deprecate literally thousands of lines

of Code by migrating these components

over to

popover additionally they've benefited

from the top layer management that

popover provides and the built-in

accessibility relationships making it

significantly easier to build this

complex pattern in the correct

way and when you have popovers you'll

likely want to add some interaction as

well and there are four new features

that landed in the past year to support

animating popovers and these include the

ability to animate display and content

visibility on a key frame

timeline the transition Behavior

property with the allow discreet keyword

uh which transitions discret properties

like display it puts you in a new

transition mode the starting style rule

to animate entry effects from display

none um and into the top layer and the

overlay property to control top layer

behavior during an

animation these properties work for any

element that you're animating into the

top layer whether it's a popover or a

dialogue and altogether it looks like

this for a dialogue with a

backdrop first you set up the starting

style so that the browser knows what

style to animate this element into the

Dom from this is done for both the

dialogue and the

backdrop then you style the open state

for both the dialogue and the backdrop

so for a dialogue this open state would

be the open attribute if you're doing

this for a popover it will be the

popover open pseudo

element and finally you animate the

opacity display and overlay using the

allow discrete keyword to enable the

animation mode where discrete properties

can transition

but popover is just the start of the

story today I'm really excited to

announce that support for Native anchor

positioning is now available in chromium

125 which is landing in stable chromium

based browsers

today

woo this means with just a few lines of

code the browser can handle all the

logic to tether two elements to each

other in this example we have a simple

tool TI being anchored to each of these

buttons positioned at the bottom center

and this one is the same idea combining

popover anchor and CSS trigonometric

functions to create this fund a twirl

open effect for this menu anchoring this

menu of options above the button that is

invoking the menu which is this plus

sign you can set up an anchor positioned

relationship in CSS by using the anchor

name property on the anchoring element

in this case the button and the position

anchor property on the positioned

element in this case the tool tip and

then you can apply absolute positioning

or fixed positioning relative to the

Anchor using the anchor function here

we're positioning the top of the tool

tip the positioned element to the bottom

of the

anchor alternatively you could use

anchor name directly in the anchor

function like so and skip the position

anchor property altogether this can come

in handy when you're anchoring to

multiple elements

too finally you can use the new anchor

Center keyword to justify and align

properties and center the positioned

element to its

anchor while it's very convenient to use

anchor positioning with popover popover

is not a requirement of using anchor

positioning it works great with any two

or more elements to create a visual

relationship in fact this demo inspired

by an article from Roman Co

shows an underlined style being anchored

to these list items as you hover or tab

over them in this case we're using the

anchor function to set up the anchor

position using the physical properties

of Left Right and bottom and when we

hover over one of the links the target

anchor custom property changes and the

browser shifts the target to apply the

positioning Styles we're also animating

the color at the same time creating this

pretty neat effect using

anchoring in addition to the default

directional absolute positioning that

you've likely used before there's a new

layout mechanism that has landed as a

part of the anchor positioning API

called inset area inset area makes it

easy to place anchor positioned elements

relative to their respective anchors and

works on a nine cell grid with the

anchoring element in the

center for example inset area top places

the element at the top and inset area

bottom does what you would expect it to

do as

well with inset area this can be

simplified to

this you can combine these positional

values with span keywords to start at

the center position and span to the left

span to the right or span to take up the

full set of columns or rows that are

available in this space you may also

want to use uh logical properties

instead of directional keywords for

inset area which are also available as a

part of this API to make it easier to

visualize and to pick up this layout

mechanism I built a tool at the

following URL where you can explore

these different position values and copy

the

code and because these elements are

anchored the positioned element

dynamically moves around the page as its

anchor moves so in this case we have

container query styled card Elements

which resize based on their intrinsic

size something that you could not do

with media queries and the anchored

element will shift to the new layout as

the card UI

changes menus and submenu navigation are

so much easier to create with a

combination of popover and anchor

positioning but what happens when you

hit the edge of a viewport with your

anchored element well you can let the

browser handle that for you too you can

do this in a few ways the first is to

create your own positioning rules in

this case the submenu is initially

positioned at the right of the

storefront button with the code that's

currently

shown but you can create a position

tribe block for when there's not enough

space to the right of the menu and let's

call that one

bottom then you can connect that POS

with position try options explicitly

calling it by name like this so now the

browser will switch between these

anchored states trying the right

position first and then shifting to the

bottom and the browser can do all of

this with a nice transition as

well along with the explicit positioning

logic there are a few keywords that the

browser provides if you want some basic

interactions like flipping your anchor

in the block or inline directions for a

simple flipping experience you can take

advantage of these flip keyword values

writing a position try definition uh

skipping the position TR definition Al

together so now you can have a fully

functional location response of anchor

positioned element with just a few lines

of

CSS it's pretty pretty

cool we see these teered experiences

everywhere and this set of features is

an excellent start to unleashing

creativity and better control over

anchor positioned elements and layered

interfaces but this is just the start

currently popover only works with

buttons as the invoking elements or with

JavaScript as the invoker for something

like these Wikipedia style previews a

pattern seen all over the web platform

we have to make it possible to interact

with but also to trigger a popover from

a link and from showing user interest

not necessarily clicking through but

doing something like a hover or a tab

Focus so as a next step for the popover

API we're working on interest Target to

solve these needs and to make it easier

to recreate these experiences with the

proper accessib hooks built in this is a

really challenging accessibility problem

to solve with a lot of open questions

around ideal behaviors but solving this

and normalizing this functionality at a

platform level should improve these

experiences for

everyone in addition to the interest

Target invoker there's an additional

future facing General invoker currently

available to test in Canary thanks to

the work of two thirdparty developers

Keith Circle and Luke warlo called

invoke Target invoke Target supports the

declarative developer experience that

popover Target provides but for all

interactive elements including dialogue

details video input type equals file and

more we know that there are use cases

that aren't covered yet by this API like

styling the arrow that connects an

anchored element to its anchor

especially as the position of that

anchor moves and shifts or enabling an

element to slide and to stay in the

viewport instead of snap to another

position when it reaches its bounding

box so while we're excited about this

powerful API and about Landing these

features we're also looking forward to

expanding on its capabilities even more

in the future I talked a bit about

styling dropdown so you might be

thinking well it's nice that we're

getting these Primitives but what about

those dropdowns the good news is this is

something that we have been actively

working on for a long time now and

there's been a lot of progress the bad

news is that this API is still very much

in an experimental State at this time

however I'm excited to share some live

demos and updates of our progress and

hopefully get some of your feedback

first there has been progress on how to

opt users into the new customizable

select experience the current work in

progress way to do this is to use an

appearance property in CSS set to

appearance based select now keep in mind

this is an experimental API at this

stage so the syntax might change once

appearance is set regardless of what the

final value name ends up being you'll be

opting into a new customizable select

experience in addition to

appearance-based select there are a few

new HTML updates these include the

ability to wrap your options in a data

list for customization and the ability

to add arbitrary non-interactive content

like images and other elements to your

options finally you'll have access

access to a new element selected option

which will reflect the content of the

options into itself that you can then

use to customize to your own needs which

is really really handy here's an example

of customizing selected option in the

Gmail UI where a visual icon represents

the type of reply that you have selected

to save space you can use basic display

Styles within the selected option to

differentiate the option styling from

the preview Style

in this case text which is shown in the

option can be visually hidden in

selected

option one of the biggest advantages of

reusing the select element for this API

is having the backwards compatibility

story in this country select you can see

that we have customized the UI to

include flag images in the options for

easier user parsing of the

content because non-supported browsers

will just ignore the lines that they

don't understand such as the C custom

button the data list selected option and

the images within the option the

fallback will look like this which is

similar to the current default select UI

identical to the current default select

UI with customizable selects the

possibilities are endless and I

particularly love this Airbnb style

country selector because there's a

clever style for responsive design you

can do this and so much more with the

upcoming styleable select making it a

much needed addition to the platform

form solving select and all the pieces

that come along with it isn't the only

UI component that the Chrome team has

been working on there are quite a few

others as well and the first addition to

uh the component part of this talk that

I want to share is the ability to create

exclusive accordion which is an

accordion where only one item is shown

at a time the way to enable this is to

apply the same name value for multiple

details elements hence creating a

connected group grou of details much

like a group of radio

buttons another UI component Improvement

are the user valid and user invalid

pseudo classes similar to how uh valid

and invalid works these work only when a

user has significantly interacted with

the input and this is stable in all

browsers recently this means

significantly less code is needed to

determine if a form value has been

interacted with or has become dirty

which can be very useful for provid

providing user feedback and reduces a

lot of scripting that would be necessary

to do this in the

past another handy component that has

landed recently is field sizing content

which can be applied to form controls

like inputs and text areas this enables

the size of the input to grow or

strength depending on its contents field

sizing content can be particularly handy

for text areas as you no longer are

resolved to the fixed sizes where you

may need to scroll up to see what you

wrote in earlier parts of your prompt in

two small input

boxes the ability to um add an HR or

horizontal rule element into select it's

another small but useful component

feature that landed in Baseline this

year while it doesn't have much semantic

use it does help you nicely separate

content within a select list especially

content that you might not necessarily

want to group in an Ops group like a

placeholder value someone's excited

about this feature I love that I would

bucket all of these smaller changes as

quality of life improvements for UI that

constantly improve the developer

experience when building on the web

platform we're constantly iterating and

it's not just for interactions and

components but there are many other

quality of life updates that have landed

in the past year so I hope that you're

ready for a little bit of a lightning

Roundup here at the

end native CSS nesting landed in all

browsers last year and has since

improved to support look ahead nesting

which means that the Amper sand before

element names is no longer a requirement

this makes nesting feel so much more

ergonomic and similar to what I've used

in the past one of my favorite things

about CSS nesting is that it enables you

to visually block components and within

those components include all of their

states and modifiers such as container

queries and media queries previously I

was in the habit of grouping all of

those queries at the bottom of my file

for specificity purposes but now you can

code them all in a way that makes sense

right next to each other in line with

the rest of your

code another really nice change is the

ability to use centering mechanisms like

align content in Block layout this means

that you can now do things like

vertically centering a div without

needing to apply Flex or grid

[Applause]

layout which means that you don't won't

get the side effects from flex and grid

like preventing margin collapse that you

might not want from those layout

mechanisms speaking of layout text

layout got a nice improvement with the

addition of Tex strap balance and text

strap pretty here you can see the

differences between the balanced and

pretty headlines versus the unbalanced

headlines teex strap balance is used for

a more uniform block of text while

pretty focuses on rendering reducing

single tins on the last line of text

we landed even more typographic layout

updates for cjk text features which got

a lot of nice updates in the past here

like the word break Auto phrase feature

that wraps the line at the natural phase

boundary and text space a teex spacing

trim which applies curing between

punctuation characters to improve the

readability of Chinese Japanese and

Korean typography for more visually

pleasing results by default

and in the World of Color theming we saw

a big update with relative color syntax

in this example the colors here use OK

lch based theming and the Hue value

adjust based on the slider which changes

the entire theme this can be achieved

with relative color syntax here the

background uses the primary color of

each of these list items based on the

Hue and adjust lightness chroma and Hue

channels to adjust the overall value I

is the sibling index in the list which

enables this gradation of values showing

you how you can combine these stepping

functions with custom properties and

relative color syntax to build out these

themes and along with the light dark

function theming has become so much more

Dynamic and simplified the light dark

function is an ergonomic Improvement

that simplifies color theming so that

you can write theme Styles in a much

more concise way as demonstrated so

nicely in this visual diagram by Adam

Argy before you would need two different

blocks of code your default theme theme

and a user preference query to set up

your theme options where now you can

write these Styles in the same line of

code using the light dark

function and I would be remissed to talk

about modern UI without mentioning one

of the most impactful inop features from

the past year and this has to be the has

selector laning across all browsers in

December of last year this API is a game

changer for writing logical Styles the

has selector enables you to check if a

child has a specific children or if

those children are in a specific State

and essentially can function as a parent

selector as well has has already shown

to be particularly useful for many

companies including policy Bazaar who

uses ha to style blocks based on their

interior content such as this compare

section here where the style adjusts if

there's a plan to compare in the block

or if it's

empty with the has selector they were

able to eliminate any added scripting

based validation uh for the user's

selection and replace it with a CSS

solution that yielded the same results

with much less code these logical style

features that required a loot of

JavaScript to ACH be achieved in the

past can now be done in just a few lines

of

CSS another key addition to the web that

is now newly available and growing in

usage is container queries which enable

the ability to query an element um and

its parents intrinsic size to apply

Styles which is a much more fine Toth

comb than media queries which only query

the viewport size angular recently

launched a beautiful new documentation

site on

angular.js its own logical styling and

without container queries something like

this was really hard to do you would

have to do resize observers element

observers now it's trivial to build

something like this based on a parents

elements

size and finally very soon we're excited

to see at property land and Baseline

this is a key feature for providing

semantic meaning to CSS custom

properties also known as CSS variables

and enables a slew of new interactions

possibilities from something as

seemingly straightforward as animating a

gradient to enabling contextual meaning

typechecking defaults and fallback

values in CSS opening the door for even

more robust features like range style

queries this is a feature that was not

possible before but it now provides so

much depth to the language of

CSS with all of these new changes and

Powerful UI capabilities Landing across

browsers the possibilities truly do feel

endless new interactions experienced

with scroll different animations and

view transitions make the web more fluid

and interactive in ways that we've never

seen before and Next Level UI components

make it easier than ever to build robust

beautifully customized components

without ripping out the entire native

experience and finally quality of life

improvements in architecture layout

typography and responsive design not

only solve the little big things but

they also give developers the tools they

need to build complex interfaces that

work on a variety of devices form

factors and meet user needs with these

new features you should be able to

remove thirdparty scripting for

performance heavy features like scrolly

telling and tethering elements to each

other with anchor positioning build

fluid page Transitions and finally style

dropdowns improving the overall

structure of your code

natively it's never been a better time

to be a web developer and there hasn't

been so much energy and excitement

around UI since the announcement of CSS

3 native features that we've needed but

have only dreamed of in the past or

actually Landing now and finally truly

becoming a part of the web platform and

it's because

it's it's because of your voice that

we're able to prioritize and finally

bring these capabilities to life so

thank you all for speaking up and doing

that

[Applause]

we're working on making it easier to do

the hard tedious stuff natively so that

you can spend more time building the

things that matter like the core

features and design details that set

your brand apart to learn more about

these features as they land follow along

at developer. chrome.com and web.dev

where our team shares the latest in web

Technologies try out scroll driven

animations view transitions anchor

positioning or even styleable select and

let us know what you think we're here to

listen and we're excited to help I can't

wait to see what you build thank you so

much

[Music]

[Applause]