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