What's new in web UI

The web platform is evolving quickly, with UI features to improve developer experiences, create new responsive capabilities, and enable more accessible interface defaults. Get a high level overview of what you can get excited about in the UI space and look out for on the web platform for CSS and HTML.
Speaker: Una Kravets
Watch more:
Watch all the Technical Sessions from Google I/O 2023 → goo.gle/IO23_sessions
Watch more Web Sessions → goo.gle/IO23_web
All Google I/O 2023 Sessions → goo.gle/IO23_all
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs
#GoogleIO

[@ChromeDevs]

Want to learn more about these announcements? 🤔 Ask the Chrome Dev team in the comments below. 👇👇🏻👇🏿👇🏽 👇🏾👇🏼

[@HtopSkills]

Yes, I'm interested in learning more! What are some good resources that you would recommend?

[@user-es2ri7lb7h]

Can all developers of chrome team remember all of these?

[@oro5421]

Why isn’t there a :for selector for matching labels with inputs? :(

[@Siddharthpandey27]

Yes interested

[@samanzakpur4144]

What about compatibility in the most common browsers?

[@GhanashyamSateesh]

Woohoo! All of the latest CSS developments in the past year compressed into one video! EXACTLY what the world needs! @Una, you're the best!

[@ragavkumarv]

Timestamps ✌ 00:00 - Intro 01:15 - Container queries 02:14 - Style queries 02:59 - :has() selector 04:48 - :nth-child of type 05:19 - text-wrap: balance 06:03 - initial-letter 06:35 - Viewport units 07:10 - Wide-gamut color 07:47 - color-mix() 09:18 - CSS Nesting 09:47 - Cascade layers 10:27 - Scoped styles 11:09 - Trig.Functions 11:28 - Ind.transforms 11:55 - Individual.transforms 12:47 - Popover 13:38 - Anchor positioning 14:45 - Selectmenu 15:37 - Discrete animations 16:28 - Scroll-driven animations 16:55 - View transitions

[@jonanddy]

🫡

[@sujit_webdev]

thanks!

[@maheswarayadav]

@ragavkumarv thanks

[@mryechkin]

Finally a customizable select! Just as I finish building one with React Aria 😅

[@nivoset]

Im just starting with react aria. Lol

[@none0n]

Do a re-write 😂

[@W4ldgeist]

"Look at these fancy features" -> developer gets excited, sees that Safari Support starts with 16 or not at all... realizes he has to wait another 2 years until less people use Safari 14.1 and is disheartened.

[@JonahSteps]

Don't be too disheartened. EU has provisionally passed a law that would force apple to allow other browsers not based on webkit on Apple devices. Once that happens, you'll see that with time support for webkit will not matter as much OR apple will be forced to develop faster to keep up with competition.

[@vsevolodlnm]

Babel

[@jackyiakovenko]

selectmenu 🔥👌

[@hyper_channel]

wow so many amazing quality of life improvements packed here!

[@PeterBernardin]

This is all so cool. So many of these I've been using complex javascript to do, for example the radial menus, doing my own trigonometry and stuff. It's great to see these things being implemented. At the same time it's bittersweet, because using these also would also leave a significant number of browsers (and therefore users) unsupported. I'll set a timer for a couple years to use these.

[@UnaKravets]

Trigonometric functions actually have wide browser support! Chrome was last -- web.dev/css-trig-functions/

[@laurencerawlings]

game changing updates

[@arcanernz]

Love the new architectural foundations. Sass features in native css.

[@AmxCsifier]

10 years ago this was all science fiction, amazing to see this much advancement.

[@vilinskyy]

CoverFlow without Safari support is a nice touch :) But seriously, the updates are impressive! Love to see accessibility details and small nuanced fixes 👌

[@oskrm]

Let Safari die already

[@nikkehtine]

This is HUGE! I remember coming across a few issues fairly recently that would have been muuuuch easier to overcome with some of these new features presented here

[@VBDesignsable]

Finally this solution with 100vh, no messing around anymore for cross browser support. awesome. top layer also nice

[@shaikshavalisyed2012]

Love to see new features ❤.

[@omarjab]

that's dope, i'm so happy about these new updates

[@AhmadAwais]

Awesome time to be a web developer, thank you Una.

[@UnaKravets]

It sure is!

[@canarymultimedia]

Loooooong overdue. Can't wait to finally use these new features!

[@acidofil]

so much cool helpful new stuff, thank you for a great video!

[@AlexisDoroszkiewicz]

Can't wait for firefox to catch up so we can start using these..

[@drnicwilliams]

Fabulous summary of a wonderful set of new css features. It’s great to have less JS in my life.🎉

[@MichalSmolinsky]

Thank you, Una!

[@Thisguyrocks518]

A lot of great features. Wow!

[@nro337]

Super exciting stuff!

[@realdaly]

I wish you added some feature to check if an element is sticky to add styles for it, like a sticky navbar that changes background color when it's sticky. But, all in all you did such a great job !

[@unakravets4368]

You're in luck 👀 sticky will be the first state implemented for state queries (it's on the roadmap, still a WIP spec and implementation)

[@realdaly]

@@unakravets4368 love that 🔥

[@harisonfekadu]

WOOOOOW!!! I can't wait 😄

[@TheNewton]

🔥 10:23 controlling source order for the cascade. Gonna solve a lot of headaches on platforms that insist on injecting their own junk into it's hosting/theme system.

[@VarunGupta3009]

Amazing developments as always!

[@fai6702]

oh finally select menu update... !! awesome development. Thank you ! :)

[@krvns]

Great job Una! Great delivery!

[@PeterSahanaya]

The container queries are really handy especially you working on component based, it become really helpful

[@SirusStarTV]

Awesome additions!

[@Yorgarazgreece]

finally dynamic viewport units! The dynamic viewport was painful experience to overcome

[@greenya84]

Awesome! I envy already future web developers :)

[@marians5015]

Wonderful

[@iamfrankstallone]

"I'll see you online" may be my new favorite catch phrase!

[@MizManFryingP]

This is incredible!

[@stokbrood]

Can't wait to use these in a couple of years

[@andrewwoan]

LET'S GOOOOOOOOOOOOOOOOOOOOOOO!

[@edu.paixao]

Amazing content!

[@mateusvahl5072]

So coooool👏

[@maissatouili9544]

well done !

[@aephyxen8437]

this is amazing

[@insinfo2008]

@Una Kravets finally being able to customize the Select dropdown will be wonderful, it is also necessary to be able to customize the input file, checkbox, radio button, the scroll bar, when will we see grid masonry supported in Chrome?

[@unakravets4368]

Other inputs are planned after we land selectmenu. Masonry support didn't make it to interop features for 2023, but you can propose it for 2024

[@guled669]

The CSS :has property have saved my life this week

[@orlovsskibet]

So we are back to stufing logic deep into the layout and design? Got it 😄

[@quintencabo]

I love those new viewport units

[@aram5642]

Cool stuff, but one major thing essential for form styling is still missing out in Chrome: subgrid support.

[@UnaKravets]

Soon!

[@StirlingHepburn]

It would be nice if you updated the video description with all the links you QR coded! 😅

[@meepk633]

Balance is so cool.

[@gorilla-san]

Dynamic viewport height finally, gosh. {insert Michael thank-you.gif}

[@john.dough.]

Great presentation! Very clear and precise!

[@damar1967]

These are too good 😭

[@jenstornell]

What is the difference between dialog and popover and when should we use one or the other?

[@yashsharmaji]

Neat features thought @CSS Nesting at 9:37 - didn't we do this in vanilla css before pre-compilers like sass and less got introduced?

[@unakravets4368]

This was not possible before in vanilla CSS

[@theman7050]

learn something properly before even thinking about starting a career in it.

[@alemon4126]

I just want the damn and to be part of the properties for every tag and not be a standalone tag for gods sake

[@indianfootball2328]

is there a css to display custom page numbers when we print the page for dynamic content

[@vitezslavackermannferko7163]

8:31 I don't feel like this math for mixing colors makes sense. Usually when you mix something, you get 50% of each. Therefore it makes sense that when you mix an opaque blue and 10% transparent red, you end up with 50% blue, 50% red, 5% transparent color.

[@mrunavailable5868]

An Ability I think you can add and If you add this I would like 1% profit from all clicks from now on, but adding a hovering feature where hovering a link can display a smaller sized display showing the page you are hovered over and you are allowed to scroll up and down through the page and as the mouse reacts within the window, as soon as you click an animation brings you into that page whether you selected a new page from that initial page or not. now with the rest of the UI I am glad to see innovation to celebrities pages when searched very clean an easy to read!

[@shriprasanna3918]

Finally a select menu . goddamn .

[@dmitryburlakov6920]

Will it be possible to use colour mix with CSS and SVG-CSS blend modes? I did quite a lot of experiments and noticed that in Safari the colours are just popping, whereas Chrome and Firefox turning them into gray mess supposedly because of linear sRGB interpolation.

[@UnaKravets]

Can you send a reduced test case? Are you trying to use color-mix() or blend modes?

[@notnk7]

when will the updates roll out?

[@manuelvega.]

Prooooo

[@paramsingh4104]

Amazing to see Chrome taking Open source initiatives to make the web better! Sad how Firefox has the least adoption!

[@lamka02sk]

Firefox follows the web standard, Google makes their own, just like MS did with IE

[@user-cm7ld5rp7h]

9:33 9:46 9:48 9:54 10:30

[@JiveOff]

So CSS really is turning into a turing complete paradigm, interesting

[@aleksandarv.1459]

Is there anything interesting that has been added to CSS after this video?

[@hanibioud]

Which we could have a search inside the select element without third party..

[@SirusStarTV]

What also needed is the ability to turn off antialiasing in *CanvasRenderingContext2D* People don't need to always draw smoothed primitives. It's impossible to draw crisp ui when antialiasing turned on by default.

[@Lavah]

FINALLY Display: none animation support

[@jamescat2386]

nice use of the word 'duplicitous'

[@UnaKravets]

Fun fact: filming day was the day I learned how to actually pronounce it correctly 😆

[@trkishh]

Holy moly, being able to animate from display none will be so nice

[@UGPepe]

ah, the forever close-but-not-there-yet UI platform, almost able to make a dropdown with it

[@shenawy04]

9:18 damn, really killshot SCSS here lol

[@quietfox157]

Not really. You cannot do ".foo { &__bar { ... } }" to make the selector ".foo__bar". But with @scope there might not be a need to use BEM anymore. Also, I'm still missing a CSS built-in alternative to mixins.

[@shenawy04]

@@quietfox157 man I haven't written actual CSS in a long time, now I tailwind everything

[@quietfox157]

@@shenawy04 same here actually. But let’s see how all this develops. Also, the more features CSS gets the more complex Tailwind gets. Let’s see how they implement all that.

[@shenawy04]

@@quietfox157 really exciting stuff happening nowadays!

[@jurrich]

Are there transcripts or accompanying blog posts?

[@UnaKravets]

Yes! developer.chrome.com/blog/whats-new-css-ui-2023/

[@kjhank]

Hey, what's that monospace font in the examples?

[@unakravets4368]

Google Sans Mono

[@kjhank]

@@unakravets4368 Thanks!

[@barjo_]

Does anyone know what monospace font is used for the code in this presentation?

[@UnaKravets]

It's called Google Sans Mono

[@barjo_]

@@UnaKravets Great font, thanks Una. And great job on the video 👍

[@Anghor]

Remeber last year and your shouts about subgrid? Gues what? We're still waiting ;-)

[@UnaKravets]

It's coming soon!

[@Anghor]

@@UnaKravets 113 or 130 rather? 😉😁

[@supTE]

10:59 What's the use of CSS scope here? As we have CSS nesting and we can do the same using it?

[@quietfox157]

Scoped styles limit the number of elements that get affected by CSS. I think it's very close to what BEM does. With scoped styles you have a way to change the title of an article without changing the title of other components. But I'd also need more explanation on this how exactly this works. Nesting on the other hand doesn't change what CSS does, it's just a shorthand to write less CSS.

[@supTE]

@@quietfox157 What if we use same selector, (here [data-theme="light"]) and put necessary CSS nested under that. Isn't it brings the same usage use as scoped styles?

[@quietfox157]

@@supTE Let's say we have Hello 1Hello 2. "Hello 2" would be inside a dark container inside another light container, "Hello 1" is only in a light container. The selector "[data-theme="light"]" does affect everything inside that element: The paragraphs "Hello 1" and "Hello 2". If you use scopes CSS knows that starts a new scope and stops affecting its content. So, @scope ([data-theme="light"]) does only affect the paragraph "Hello 1" but NOT "Hello 2". So, with scopes you can tell CSS "stop right here! Don't go further down the DOM". This is not possible without scopes. Or this why things like BEM were invented.

[@supTE]

@@quietfox157 Got it. Thanks for the explanation. 😃

[@igugadev]

can I access the presentation please?

[@enveralbarad]

all of this only available for chrome rite?

[@unakravets4368]

There are browser support tables on most of the slides!

[@ievgeniibielkin]

finally no need SASS for css nesting

[@igugadev]

Firefox is the new IE 😅 there are several APIs without support.

[@ievgeniibielkin]

I don’t come u with use cases when to use color-mix

[@quietfox157]

Mixin transparency into an opaque color, like mentioned in the video. Mixin a color with black or white sounds usefull. Or mixing a font color with it's background which is not black, white or gray. I do have some ideas how to use it.

[@none0n]

display: none is the reason a lot folks are using animation libraries 😁

[@freeyoutube216]

It might sound wierd but... what is webUI? is it a new frontend framework, I have searched for this but I cant find anything such as google webUI

[@unakravets4368]

Web UI = Web user interface (development)

[@seth111yta1]

I probably wont live long enough to see Safari and FF to implement this lol

[@Linuxdirk]

We now have math and try/catch mechanics in CSS ... 😂👌

[@kenwood7195]

When did Google seize control of the Internet from w3c?

[@unakravets4368]

All of the APIs implemented go through the w3c standards process

[@kenwood7195]

@@unakravets4368 Good to see you check it with the Google staff at w3c. The Internet is now owned by .

[@nholmes86]

Ah ok so this video is for the developers..I was not getting!!

[@craigiswayne]

how do i super like a video?!

[@budawski]

text-wrap: balance is HUUUGE 5:40

[@felixmildon690]

Why firefox supporting nothing? Are they being squeezed out the the browser market?

[@MikeNugget]

Nice! But still no `:wrapped` pseudo selector for elements which are wrapped while resizing the parent element (flexbox, grid, inline). This feature has been requested for over 10 years, check stackoverflow please.

[@UnaKravets]

Can you share a link for some context?

[@NerveClasp]

Whoa! So much great stuff! Thanks for a great video, Una, as always!) З.і.: пасхалочку з кольорами українського прапору помітив)) Дяки)) Все буде Україна!)

[@UnaKravets]

☺

[@Zorrle001]

is the background and the room legit or fake? xD

[@techlifejournal]

Why dom manipulation is only limited to JS? We need browser to support direct calling of Web apis without js

[@quietfox157]

What APIs for example and how would you "call" them? HTML and CSS cannot "call" anything.

[@Epocht5735]

poor safari

[@StarOnCheek]

I am not sure how I feel about adding runtime support for things that were ment to execute at build-time (like CSS scopes) and native support for common components like popover (which is not even an element) or selectmenu. What happens if these features fall out of fashion? What happens if we need something new? The advantage of managing this with JS was that the developers could extend a ~~minimalist~~ already bloated set of elements with whatever they needed and have complete control over it. Edit: I am starting to suspect that Google is trying to bloat and slow down the web platform to make Flutter a more attractive option

[@_danisson]

I dont know what you mean about flutter, in web ??

[@StarOnCheek]

@@_danisson web as well, but more importantly, native apps which have seen an increase in webview-based UI recently. I wonder if there is some evil plan to replace HTML with flutter completely somehow and lock everyone in

[@RichardDavey]

I'm not sure modals or select lists are going out of fashion any time soon, given they've been around in OS UIs for 40 years now. No one is forcing us to use 'popover'. Can still crank out the JS reinvention wheel if we want to.

[@StarOnCheek]

@@RichardDavey I know no one is forcing them but it also doesn't make sense not to use them right now. They are pretty good for the current purpose. It is just that some aspects of intended behavior might change in a way we cannot foresee now so we might have to jump back to JS and have the code for these elements sitting around in the webview for no reason much like other deprecated html features. And if you do want to make the argument that some elements should have native support, how do you know when to stop? Why not implement tab lists or tree views natively? What about something like a 'chat view' with semantic markup for different chat members? Also if they start doing that, would we be expected to wait for vendors to release native implementation of all new UI elements we discover before we can use them "properly"?

[@dmitryburlakov6920]

Disagree kind of. The amount of workaround we have to do today is certainly a larger overhead comparing to more customization friendly components. Styles reset, double renders (“visual” selection box and real one), compatibility styles, et cetera. It’s just more to parse and execute in slow interpretable environment. Another thing I would be looking into is allowing labels to have block children. It’s so common for the radio elements to have a larger actionable flex box around them. If we can avoid modifying bunch of spans to do what they don’t supposed to be doing, what’s the drawback?

[@tostane]

sTOP allowing popup windows asking for passwords and such

[@rapidlightning2841]

I guess Firefox doesn't want to be invited to the modern web... It's giving me IE vibes.