The latest in Web UI (Google I/O ‘24)
Summary
TLDRThe 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
🌟 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.
🎨 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.
🔄 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.
🌐 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.
🛠 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.
🔄 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.
🎯 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.
📋 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.
🌈 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.
🚀 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.
Mindmap
Keywords
💡CSS UI components
💡Intrinsically responsive design
💡Logical components
💡Dynamic color theming
💡Scroll-driven animations
💡View transitions
💡Popover
💡Anchor positioning
💡Native form controls styling
💡Quality of life improvements
💡Container queries
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]
Посмотреть больше похожих видео
The new responsive design
Overview of Tailwind CSS Components with PrimeVue
Flutter Basic Training - 12 Minute Bootcamp
Kim Chouard – Zero to Music Hero: Building Cross-Platform Games in Months With React Native & Skia
Learn Webflow in 16 Minutes (Crash Course)
Why I Pick ShadCN and Tailwind for all my projects
5.0 / 5 (0 votes)