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

Get a rundown of all the things developers should know that landed in the browser for UI development since the last I/O, plus what's on the product roadmap.
Speaker: Una Kravets
Watch more:
Check out all the Web videos at Google I/O 2024 → goo.gle/io24-web-yt
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs
#GoogleIO
Event: Google I/O 2024

[@ChromeDevs]

Check out all the web sessions at Google I/O → goo.gle/io24-web-yt

[@linuxgeex]

@media {prefers-* remains distractingly notional unril such time that Chrome provides Users a way to convey their User Preference to the User Agent. ie with Config Options. Everyone please add your voices on this subject to all Chrome for Developers posts until action occurs, and upvote each other's comments until Chrome Devs take action. Not only is this preventing realisation of benefits by Users, but it blocks Developers from even testing it.

[@aberba]

Where can I find the sample code for the talk?

[@Rick_Sanchez_Jr.]

Are your Chrome UI devs smoking crack or what's the deal? Because all of the changes are awful and not only are they awful but you also made it so that we can't revert the changes

[@no1_of_note]

Over then next couple of years, this new popover API is going to save centuries worth of accumulated developer time.

[@TheBswan]

Are y'all not using component libraries? Or stack overflow? I've literally never struggled with a popover

[@zenlanfleek6580]

Radix UI all the way baby ​@@TheBswan

[@JoeyXie]

@@TheBswan UI libraries can help you build popovers, but you should know what's inside it. To implement a simple modal popup, you need to handle the visibility, z-index, position, keyboard events, mouse events, it's very hard to do it right in plain javascript. Using a react component to implement a popup is easy, but the library did the hard things for you. I don't write react, I use blazor wasm and tailwindcss to build front end website, so the popover api is a life saver for me.

[@TheNewton]

​@@TheBswan "I've literally never struggled with a popover" and yet: " using component libraries? Or stack overflow?" This is not about "struggle" you burnt time on this you shouldn't have too.

[@a11aaa11a]

​@@JoeyXieI've written all of these from scratch but it's just so just more efficient these days to use a component library where this is all already handled by teams who have spent hundreds of hours collectively on popovers. Unless you have extremely specific requirements or you're doing it to learn/for fun, it seems a bit unwise not to use premade components. I'm excited for the popover API, but not because it's going to save me time directly, but rather that of the component library devs who then have more time to spend on other things.

[@--Arthur]

People in 1960s: "We'll have flying cars in 60 years!" 2024: We solved centering a div and I'm all for it

[@LarsRyeJeppesen]

Huh; css grid solved this years ago

[@zenlanfleek6580]

​@LarsRyeJeppesen CSS Flex, auto margins, and absolute position fixed it long time ago. Centering a div became an outdated joke.

[@poschinski]

@@zenlanfleek6580 but people are still googleing it

[@lukor-tech]

I don't know what the heck happened to the quality in some of the shots but great talk nontheless, as always it's a blast to see what new stuff comes to the Web and UI developement.

[@francescos7001]

I'm constantly using text-wrap: balance; and text-wrap: pretty; as a little progressive enhancement.The same goes for the dialog element with .showModal() and .close() and other features. Happy to see so many improvements that really simplify my work as a web developer

[@lurking_alpaca]

Super usefull features. Can't wait for them to become available in all browsers.

[@dmanzer16]

The start of making web experiences cool again. I can't wait to implement some of these new css features.

[@jefftee7354]

View transitions across pages is a huge deal - very exciting!

[@neutralitat2570]

And SPA finally will be completely obsolete 🎉

[@invinciblemode]

@@neutralitat2570SPAs will probably use it too

[@trashAndNoStar]

It's Chromium only for now, unfortunately. Still have to add fallback for unsupported browsers if needed.

[@mma93067]

@@trashAndNoStar some sort of polyfill based on origin vs an entire framework is a no-brainer.

[@zenlanfleek6580]

Safari will add it after 9 years.

[@roei7111999]

FINALLY!!!! WE CAN CENTER A DIV!!!!! And aninating gradients, thank you so much!!

[@hw7channel571]

Great presentation of the improvement of the Web UI

[@aberba]

Styling , Popover API and dialog are huge ones. I hope too date, time and calendar inputs get some customisations too.

[@kjvisual7]

Field Sizing Content for the WIN! OMG my biggest annoyance is that tiny window we all have to type in. Hahaha as I'm typing this I'm noticing that my KZbin text field is sizing up to at least include 4 lines of text. But I want the option to see everything I wrote, all at once. Anyway I hope a lot of people enjoy a resized, typed form window so it can continue to improve.

[@nekomew]

I can see so much savings in lines of code for my projects once the popover and css scroll are fully implemented in all browsers. Hope they will be baseline soon.

[@mayureshdaphane]

This is truly an amazing set of features and a fantastic user experience that I haven't encountered before! I'm thrilled to explore and utilize them in my projects. A big thanks to the dedicated team for all their hard work and for continuously enhancing the web, making developers' lives easier. We're in the golden era of the web!

[@keithpurtell1213]

A lot of exciting material here, especially (for me) in view transition, and some of the scroll-driven animations.

[@abdulsohailit]

Fantastic demonstration and insightful technical discussion! I really appreciated the depth and clarity. how can be the part of live session anyone can guide me

[@orc_song]

Helpfull....gonna use in my future project

[@proletar-ian]

This is fantastic! The rest of Google I/O felt particularly boring this year

[@PraveenJoshua23]

So glad to get the Popover API! 😁

[@Sockertuppen]

Many great examples. Do you share code examples of these anywhere?

[@artecke99999]

Mind-blowing! 😊 I love it! 😍

[@Gbtx6]

This was a wonderful presentation full of excitement and great new features finally being available in baseline. You nailed it all Una, ty so much ❤ More Una presentations pls!

[@funky_hedgehog]

It's amazing! We've been waiting for years!

[@crownstupid]

would be nice to have a link to a repo with all the examples

[@lmnk]

Damn, never been so excited about new features... this is amazing, great job! Can't want for them to go baseline

[@wentallout]

I would love to watch this in a blog/written format.

[@UnaKravets]

Working on it!

[@thengakola6217]

@@UnaKravets Pinging for getting my notification once finished

[@mrx.2233]

A will done presentation thank you!!!

[@tithos]

All of my IDE's, React and Sveltekit are calling the `select->button->datalist` combo invalid HTML. How do we use it?

[@zerdox4]

timecodes would be so great

[@DarrenbyDesign]

THIS IS AMAZING!! I'm so ready to try all of this

[@dogoku]

Yuna knocked it out of the park!

[@roshevideo]

30:15 Greetings from Lviv ❤

[@brunomachado3690]

Does anyone know the name of the code editor theme used in the presentation?

[@TheNewton]

34:58 exclusive accordion - we still need style control over the detail elements summary marker. Though it's funny the anchoring for the popover api 19:38 or vertical centering of align-content-for-block-layout 38:07 might mean new hacks in trying to get a fake marker to layout on the rightside AND vertically center as the summary height changes such as due to text wrapping.

[@JakobEriksen]

summary::marker { display: none; } summary::before { ... custom marker closed styling ... } [open] > summary::before { ... custom marker open styling ... } (display: flex on summary will collapse the marker)

[@anoosurf]

So many advancements .. so many years … wow … but why we still missing a basic combo box select feature with autocomplete ?

[@Miguel_Castaneda]

Great video, CSS is the best!

[@highonranking]

really cool stuff!

[@KeshavAneja]

I was done at centering divs :D

[@QuintessentialDio]

It's truly a golden era for web ui🔥

[@development5625]

When all these functionalities become available in Firefox, it will be worth it. 🔥🦊

[@aniketbhushan2096]

What font is it? Looks neat.

[@rezzvy]

Since there's a certain way to achieve something without involving any scripting or CSS hacks, does it mean the previous approach will be deprecated?

[@Daniel_WR_Hart]

Not if you want to support older browsers

[@afrikanonyma]

Well well well... very interesting, guys !

[@jfftck]

What about old properties that improve page readability for everyone, like those with dyslexia? One property that is only supported in Firefox is text-justify that allows adjusting spacing between the letters and words to look more balanced, because the default text-align: justify has always looked terrible and nothing like the justification that newspapers use.

[@FishTalkFish]

I love Una!

[@skylyne27]

super cool

[@someonelastname8175]

Looks fantastic. Just need Tailwind to wrap it up and we'll use it in prod.

[@aberba]

Sooner or later, not knowing vanilla CSS is going to be a problem.

[@tomino133]

Great talk. Una is an absolute legend.

[@DenisTRUFFAUT]

Awesome !

[@quintonashley5745]

this is incredible!

[@eladshamai]

🤩🤩🤩

[@obrien8228]

Notes: View Transitions example @12:40 Popover @ 21:25

[@hugocsl]

🤯

[@havefun5519]

anchor v.s. popover, which is better? seems they have some overlapped use cases?

[@Killyspudful]

They work together - popover reveals/hides the 'floating' element, and anchor positions that element in relation to the trigger.

[@havefun5519]

@@Killyspudful Thanks for the info🤞

[@divyanshsh]

superb

[@riacharda]

I can't wait for Kevin Powell's take on this! 🙂

[@brangja4815]

Web is always the new future

[@clementmmas]

I've been using Firefox for years but it really seems to be lagging behind when it comes to supporting new features.

[@spartanatreyu]

Nah, Google only shows off features that their own browser supports and never goes out out of their way to show off features that they aren't prioritising (even if their competitors already support them). For example, Firefox had subgrid for about 4 years before Google.

[@khanfaysal993]

popover was really exciting

[@mma93067]

Cross-document view transitions could completely revolutionise and revive old school full stack frameworks like django and laravel

[@repotranstech9614]

Htmx already fixing it currently.

[@handlewastaken]

cross-page css transitions oh my god my heart is melting

[@fabiocroldan]

Excellent improvements on the web, it is a shame that will no longer need programmers to use them (💀AI)

[@cy3889]

Finally🎉 this is a game changer! Does anyone know if this is iOS/ Android friendly? Or just web?

[@wdirex]

Watching features came 1, 2 years before would be better since they just got mainly supported :p

[@unmye]

watching this video made me appreciate more Framer motion to exist

[@benravenhill484]

Cool bro

[@AvionicsDev]

38:22 I'm done. Ok bye.

[@robinparadise]

I need the source code for the menu dropdown

[@Voltra_]

All of this is really cool, but it'd be better to have MORE browser compat and specs, and LESS one-sided evolutions Also older browser supports is extremely important (things like iPhone 11 still have weird quirks, same goes for "older" versions of Android)

[@vsdy1990]

We also need sidebar drawer modals

[@UnaKravets]

You can build those with popover: codepen.io/web-dot-dev/pen/vYbadaJ

[@i_sener]

I'm having trust that Tailwind will implement those for the devs.

[@UnaKravets]

Yes! That’s the plan! They’ve already started working on anchor positioning

[@forno_nicolas]

Hahaha true

[@TheNewton]

34:58 exclusive accordion - needs preference optout , also needs inclusive accordion behavior. preference optout - It's annoying when sites have a FAQ they've made it so so you can't have to pieces of content open because the others close. inclusive - long FAQ's and you have to click open every question one at a time instead of being able to just open them all.

[@vadim3]

Only Centering a div might be enough :))

[@socialkruption]

So in other words, I'll be waiting a few years before I use these.

[@layhoutchea5695]

Not years, decades.

[@SirusStarTV]

Wouldn't you just use it indirectly?

[@uchennaofoma4624]

When was the last time you updated your browser? Exactly, you didn't, they just do it by themselves. In a few months you should be good to go with these new features

[@socialkruption]

@@uchennaofoma4624 Sorry, you must be new here. Changes aren't rocket fast across the board and to think you would use the new features simply cause Chrome implements them show how green you are.

[@kevin00898]

​@@uchennaofoma4624most of the features mentioned are blink-only for now, or at least not implemented yet in firefox. So probably a big longer than a few months :(

[@user-es2ri7lb7h]

getting more complex and heavy

[@avi12]

12:47 That 1px upwards translation of "View Transition" bugs me 💀

[@elliptictree]

I want to see BRAVE!!

[@johanalm8105]

I really want Firefox to implement `@scope` 🙏.

[@aberbaCodes]

Keep betting on the Web!

[@arafiknurf6801]

finalyy we dont use ------ to separate the contents :")

[@radislaw]

Очень круто! Так много мозговыносящих новинок. Жизнь разработчика никогда не будет прежней

[@healthadvice3091]

5:34 no need GSAP

[@nekomew]

Yeah no more scrollTrigger plugin for simple scroll animations.

[@spartanatreyu]

Why download a dependency when the browser can already do it?

[@nekomew]

@@spartanatreyu Well, so we don't need to rewrite the code especially for complex scroll triggered animations.

[@mbsyaswanth3334]

In just a few more years, I have a feeling that we will go back to PHP since we don't need js anymore. This is good and bad at the same time 😢

[@markiel55]

RIP Single-Page Apps 15:30

[@seanthesheep]

releasing exclusive accordions is a terrible idea. their UX is really bad, yet for some reason developers love to use it. fortunately, it should be easy to remove with a userscript/ extension

[@snitox]

Bro jsut make my pc stop overheating if I have 4 chrome tabs open.

[@edhahaz]

native browser features: useable now, added 10 years ago

[@igeoerre]

Yay, one less javascript package year after year :D

[@user-ze7ht6pq8i]

I love Computer .

[@fhubleu]

ada indonesia coyyy 8:15

[@codify2450]

you throwing accessibility through the window; popcorn pages. Please keep the browser accessible to those who don't have visual capability as you have!

[@ThugLifeModafocah]

this is actually awesome to enable more and more PWAs and move away from the native apps hell.

[@imadeekosatriawiguna6252]

Tokopedia? 😌

[@anujverma8057]

Google who autoplays shows forced advertisements on KZbin having 90% distracting elements , telling the world how to make their website less distractive . improving accessibility for the needy should be appreciated but destroying other peoples mind first is ugly .

[@huben92]

Wow ada tokped

[@avertry9529]

The biggest shame is waiting for all browsers to implement these things, like scroll animation timeline and view timeline. I've been waiting too long for this. What's needed is an independent standard, that pre-makes these, so browser makers literally have no work to do other than add them in, like a plugin feature.

[@UnaKravets]

I guess that would be a browser engine. For example, any browser that uses a Chromium-based engine (i.e. Edge, Arc, Brave, etc.) automatically get these features when Chromium implements them. But the 3 major browser engines (Gecko, Webkit, Chromium) are currently too divergent for everything to just work like a plugin.

[@avertry9529]

@@UnaKravets Thank you for the response Una, I guess it wouldn't be such a headache, if the polyfills worked, almost every issue over on github is polyfill based. Still I know they are doing their best, and maybe this is why other browsers have not implemented the scroll-timeline yet, simply because it's too difficult to implement.

[@LarsRyeJeppesen]

You can just use them, old browsers just won't animate. So what.

[@UnaKravets]

@@avertry9529 There is a popover polyfill by Oddbird! Not all CSS features are easy or efficient to polyfill, though.

[@arafiknurf6801]

ada tokopedia coyy

[@rdmercer]

20+ months and Mozilla still cant implement the View Transitions API. This is why Im just going to stop trying to support the browser at all in my code. They aren't even in the fight anymore. Chrome just getting better and better each day.

[@bepd]

Safari not supporting this stuff makes it useless to me :(((

[@murali-alive]

Nice, See that's wasn't hard, was it? AI isn't the only cool thing Google.