What's new for the web platform

Watch this keynote interpreted in American Sign Language (ASL) → goo.gle/3wd5MmZ
Una and Jake dive into recently-cross-browser features, and some experimental stuff that's on its way to make web development easier and more powerful.
Chapters:
0:00 - Intro
0:51 - New UI features
1:10 - Accent color
2:11 - [Dialog]
3:26 - Selectmenu
4:14 - Datetime-local
4:35 - COLRv1
5:44 - Bfcache
7:02 - Image Lazy Loading
7:36 - Aspect-ratio
8:18 - Containment
9:21 - Priority hints
10:13 - Size-adjust
10:56 - SIMD
13:32 - CHIPS
14:43 - Topics
15:39 - User-Agent Client Hints
15:48 - WebAuthn
17:01 - Media Session API
17:22 - Window controls overlay
18:35 - Navigation API
18:54 - Page transition API
19:41 - Web app color scheme
19:51 - Eyedropper API
20:46 - Virtual Keyboard
21:11 - Structured cloning
21:59 - CreateImageBitmap
23:25 - SharedArrayBuffer
23:57 - URLPattern
24:39 - Web Codecs API
24:55 - Cascade layers
27:36 - :has()
29:36 - Container queries
29:54 - Wrap up
Resources:
CSS accent-color → goo.gle/399xjOz
CSS color-scheme → goo.gle/3N1kpRe
dialog → goo.gle/3L07LjR
selectmenu → goo.gle/3M5jVt8
Selectmenu demos → goo.gle/3wftMGh
Input datetime-local → goo.gle/3ysFCzj
COLRv1 fonts → goo.gle/3L2zeS3
Back/forward cache → goo.gle/39SJgbJ
loading="lazy" → goo.gle/3w3DigU
CSS aspect-ratio → goo.gle/3M2a6fK
CSS containment → goo.gle/396F080
Content visibility → goo.gle/3yAFcqC
Priority hints → goo.gle/3M4O388
CSS size-adjust → goo.gle/3w3E25G
SIMD → goo.gle/3Fy57Rj
Interaction to next paint → goo.gle/3NaAyUF
CHIPS → goo.gle/3wpBEFk
Topics API → goo.gle/3ytEsDL
UA client hints → goo.gle/3L1Pov4
Webauthn → goo.gle/3wlrGVc
Webauthn passkeys → goo.gle/3M6MuGA
Media session API → goo.gle/3FwwbAC
Window controls overlay → goo.gle/3L3xbNM
Navigation API → goo.gle/3KVQGru
Page transition API → goo.gle/3kVBFLF
Themes in manifests → goo.gle/3ynnhUu
Eyedropper API → goo.gle/3w1spfk
Virtual keyboard API → goo.gle/3yx0CVI
structuredClone → goo.gle/3M2DQc9
createImageBitmap → goo.gle/38jXyBI
Top level await → goo.gle/39VD8zz
Private fields → goo.gle/3ytxPBi
array.at → goo.gle/3yrenoU
SharedArrayBuffer → goo.gle/3L3J2vb
URLPattern → goo.gle/3P5e2y2
Web codecs API → goo.gle/3Pnl2GS
CSS cascade layers → goo.gle/3M58Ubc
CSS :has() → goo.gle/38cggeF
CSS container queries → goo.gle/3FA9Odx
Container query polyfill → goo.gle/3ytfjJy
Interop 2022 → goo.gle/3rjw0Tf
Speakers: Una Kravets, Jake Archibald
Watch more:
All Google I/O 2022 Sessions → goo.gle/IO22_AllSessions
Web at I/O 2022 playlist → goo.gle/IO22_Web
All Google I/O 2022 Keynotes → goo.gle/IO22_Keynotes
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs
#GoogleIO

[@ChromeDevs]

Watch this keynote interpreted in American Sign Language (ASL) → goo.gle/3wd5MmZ

[@dwighthouse]

Bug Report: I'm subscribed to this channel (Google Chrome Developers) with the bell set to "All". Of the videos from this channel in my Subscription feed, it is only showing the American Sign Language version of the videos in most cases, not the non-sign language videos (and some videos are missing entirely).

[@lakhmichand3244]

@@dwighthouse qkl Ffgrfgrg 3rd L) 7☁😊☁☁😊☁😁☁ ☁😊☁☁😊☁☁☁ ☁😊😊😊😊☁😊☁ ☁😊☁☁😊☁😊☁ ☁😊☁☁😊☁😊☁

[@bhagvatikumari9017]

@@dwighthouse oye I

[@robinsonhernandez7052]

@@bhagvatikumari9017 uany

[@user-ok9cb1zp6o]

j

[@jaredwhite88]

Only a few minutes in, and I just want to say I really appreciate how open you are with presenting how features have cross-platform support across all major browsers/engines. Not just talking about Chrome-only. This is what I love so much about the web! ✌️

[@vhoyer]

Did they showed any one feature that is available on Firefox and not on chrome? I mean, cool that every browser agreed to have their names mentioned in here, you know, just saying haha

[@pedrojimenez2454]

@@vhoyer Probably if it's exclusively in other browser, it won't show in here, because that would be an experimental feature of that browser. Just like you won't see Firefox showcasing the page-transitiom experimental API, because for now doesn't make sense for them doing that.

[@MrSpotmarker]

Actually yes. They showed a feature that is live in Safari and only experimental in Chrome.

[@Bretzge1990]

This was such an amazing video. Una und Jake bring so much energy to the table, it's so cool to watch. Thanks for all the hard work that went into building these great new features 😊

[@svivian]

“Guess how many takes I needed to pronounce specicicity correctly” Sounds like zero 😆 Seriously though great overview of new features!

[@hrgwea]

I heard "specicifity".

[@sydneyshields111]

lol i was like "? i dont think that's how you say it"

[@RasmusSchultz]

"spessisifity" - consistently pronounces it wrong and then proceeds to boast his flawless pronounciation. I can't tell if he's serious? 😂

[@Chrisazy]

For anyone that just has no idea what it's supposed to be, it's supposed to be Specificity lol. So .... close? I guess?

[@rand0mtv660]

Loved everything that was showcased. It's cool that browser vendors decided to work together and really double down on features and compatibility. In 2023, just give us the ability to transition from height/width 0 to "auto" and vice versa and everyone will be happy 😁

[@SylvainPOLLETVILLARD]

Very exciting stuff this year, and this video does an amazing job at presenting it in half an hour (although pauses were required to process everything !). Excellent job from the devrel team

[@Qwerasd]

Specicifity lol. Also... one take Jake 👀 Jake & Amir reference? Amazing.

[@bbrosser694]

Not only did I enjoy this Team=Presentation, I actually think that I'm beginning to record some of the new information in my brain. So, thank you so very much for sharing with focus, purpose, and fun!

[@rob_castillo]

I love watching videos like this one, where the presenters don't make things super serious, it's amazing how a little fun and comedy can bring so much joy into learning. I'm looking forward to adding many of these new features into my web development.

[@boomshakalaka656]

Like the apple developer conferences where they all stand legs apart like superheroes.

[@Stoney_Eagle]

31 minutes of solid web dev goodies, my excitement for web development has been triggered. My goodness what a lovely improvements, they are welcomed with open arms! Some top ASMR and a kick in the but for native apps if I may say so 😜

[@sebbeselvig3931]

Fantastic video. Really appreciate how you show browser support for the various features. Hope to see more episodes in the future when these features become fully supported.

[@mc-ty4br]

This was AMAZING⭐️ Many thanks to you and to all the teams who worked to get those features delivered

[@user-mm8xx9ol8y]

For me as a front-end engineer, this was a really amazing and wonderful video.🎊

[@AndrewBone]

I love that the paper in Jake's "reading off a sheet of paper" gag really had stuff on it, that's commitment 😅

[@dassurma]

It’s not a gag. Jake just doesn’t know SIMD.

[@jakearchibald]

@@dassurma the lines were genuinely written on the paper so I could look away from the teleprompter

[@saintpyo]

@@jakearchibald You even managed to namedrop Squoosh, I almost felt like i was watching http203

[@MattBidewell]

The content from †he team really has improved so much! Love it. FYI - if you're watching this and don't what the browser is on the far right of the browser availability bar, it's Samsung

[@sergioavalos]

I was wondering exactly that. Personally, I think they should have used Opera instead

[@UliTroyo]

Jake's so cute omg I love him. Informative video, great stuff, but I'm here for the Jake fanboyism. High relevance, high quality internet comment I know. Your fault for reading it.

[@papperlapapp-dev]

Great video! Thank you for that. Learned so much! Love how you easily switch between fun parts and tech details. Awesome!

[@bhanubhattarai13]

Una is my favourite dev relations engineer.

[@alystair]

Jake ✔️ Squoosh mentioned ✔️ Proxx subtly shown ✔️

[@jakearchibald]

I'm consistent if anything

[@thisislala]

Great video folks, just to add something: Samsung Internet is currently also supporting WebAuthN 🎉

[@IceMetalPunk]

I'm so sorry, Jake, but... you pronounced "specificity" wrong every time 😅 It's spess-if-icity, but you kept saying spess-iss-ifity. Maybe 2-Take Jake is available for a reshoot? 😁 I'm really loving the eyedropper API, even though I can't think of any use for it right now beyond web-based image editors. I'm sure I'll come up with something one day...

[@jakearchibald]

It's pronounced spess-iss-ifity in the UK (this isn't true but I'm going to try it as an excuse)

[@glaivemaster]

@@jakearchibald UK resident here, can confirm (I've got you, Jake)

[@ISandbagI]

where is Kevin Powell?

[@IceMetalPunk]

@@jakearchibald As an anglophile, I'm pressing X to doubt. As an American and a fan of yours, I'll let it slide 😃

[@hrgwea]

The timestamps are quite off in some cases. For example: 6:18 Image lazy loading 7:17 Aspect ratio 26:26 :has() 27:42 Container queries

[@coderkind]

Great video, everyone!

[@mostafaalmahmud]

This is an informative video. Learnt a lot. Thanks!

[@leoryzap]

Excellent video, learned a lot of interesting things to test out.

[@alexroden6405]

Lii kk

[@charlieclown9913]

Great update. Thanks.

[@alanschio5793]

I Love jake and una so much ❤️

[@bbrosser694]

Finally, I can see clearly where Google is headed with its new products and new ideas. Wow! What a huge amoount of support for Google Users whether Old or Young, or great big companies. Wow! Great News.

[@burntcustard]

Jake isn't using a Joy-Con? What alternative reality have I slipped into?

[@jakearchibald]

I know right! Using Google Slides too like a good company boy. However, the joycon will return in my page transitions talk, later today.

[@bulelanibotman]

hey, does anyone know what resource is that, that una kravets used to explain accent-color?

[@boiimcfacto2364]

Incredible video, always love the energy shown by my two fave devs Una and Jakey (can't believe I'm fanboying over developers more than celebrities LOL). One concern I have is the *navigation* API sounding very similar to the navigator API. Maybe you could come up with a better name, or add it somehow to the navigator API instead.

[@jakearchibald]

Yeah, the similarity is an issue, but there really isn't a better name. It used to be called appHistory, but it's an API all about navigation.

[@boiimcfacto2364]

@@jakearchibald Hmm that's true. It's a completely new API though, so it doesn't really have to be all that semantic and I'm sure devs would be willing to stick with whatever name is finalized upon. In any case, thanks for responding! (also hope the next http203 vid comes out soon XD)

[@victorjozwicki8179]

Excited for the clone and dialog

[@MaxArt2501]

0:31 Jake going full ElectroBOOM

[@sabuein]

Thank you.

[@ucheozoemena2499]

One take Jake! 🤣 Wes Bos would be proud haha.

[@MrGaryg20047]

Hello Una I bought an HP Chromebook in 2017 and now in 2022 the machine won't be able to download updates and since organizations want us to reuse laptops, desk top computers, and I don't like getting rid of a laptop because it's considered outdated, and do I need to buy a new Chromebook?

[@jakearchibald]

The best thing to do is contact HP, who'll be able to give the best advice for the model number of your Chromebook.

[@Eltopshottah]

6:45 so cool! Lazy loading

[@nativeKar]

Everything in this video filled me up with joy except seeing that ring on Una. 😅

[@StephenMoreira]

Jake appeared, and I was like....it's Jake! Almost like an Avenger showed up.

[@alystair]

The user topics API could also be used to hint categories when signing up to community websites... a win for UX and potentially increasing signups.

[@gettergejetter]

Waiting for that :has selector for years now. Finally some progress on that 😁

[@K9MobilityHeroes]

10 out of 10

[@digvi2550]

This properties can we use in vscode ?

[@VarunGupta3009]

Awesome!

[@jarretoshea3560]

Love the removal/addition of the lab coat & safety goggles based on whether the feature was stable or experimental

[@ttorres]

Omg I didn't even realise that's what was happening...

[@ionutale1950]

the 9:21 priority hints should have been a float number from 0.0 to 1.0. just low/high is going to get in the way fast.

[@LuLeBe]

As long as it's not an integer of arbitrary size. "z-index: 10000000000" is enough of that already xD

[@ClarkMitchell2012]

Link to the Font Matcher?

[@cat-.-]

Can only imagine how much tear and sweat and sleepless hours and debugger sessions are going into that page transition feature now And it probably won’t be caniuse ready for another 5 years because of safari :(

[@JamesJansson]

That specicifity joke was hilarious. Nice trolling.

[@connorschumer2092]

I love this as a student of web dev for 6 months now. Just starting to be able to (kinda) follow along. Also, I hilariously giggled every time I heard, “specicifity.” Is that what you meant to say? Because I don’t know if that’s correct, though I may be wrong. If that’s how it’s said wouldn’t the base word be “specicif?” Oh god, I think my brain is leaking.

[@LuLeBe]

How is this topics thing any more privacy friendly than what happens currently? Most sites use Google ads, so it's only Google who has all the ad data. And they would also be the ones to have all the data about me to predict which topics I care about. Basically both the same, only difference being that Chrome could outperform Firefox there because they surely don't have the same AI capability. Can't say I'm impressed by this idea in any way.

[@mathe42]

structureClone - in memory of surma...

[@robinparadise]

Brutal!!

[@StellarWeb008]

I am really happy see the web platform developing in such manner. But CSS needs even more development like accessing properties from parents and executing conditions or operations on them, matching elements that have particular styles, etc so that we don't need to use javascript again and again to achieve such outputs.

[@user-doctor]

So Nice

[@dinoscheidt]

11:14 - Every engineer in their head 99% of the time

[@jamieperkins906]

So much wow!

[@Nikolafesb]

Is portal element still in development?

[@vikingthedude]

I wouldn't have imagined getting rick rolled in google io

[@MajorBreakfast]

Container queries chapter timestamps are incorrect

[@romanext921]

This is so nice. When will Temporal API become a thing? Dates are just the biggest pain ever

[@AndreiBenHur]

The "pun intended" face was the only part that appeared to be real, the rest was just bad fake faces and corny jokes from the guy. Sorry for that rant, but the content is awesome!!

[@Chrosam]

8:14 wait, what's the "padding-top hack" ?

[@quantum_net219]

I don't know, I'm not a hacker 🤷🏻‍♂️

[@kunukn]

Pretty good production quality. And content quality :)

[@tusharsnn]

Late to the party but, jack has a thing for acting, wondering when we can see him taking an oscar :p .

[@breezy8172]

Chrome Lab Coat™

[@hey_dan]

YAAA 🤯

[@ManishPatel-zq4hr]

Jake recorded his part 23 times, I always struggle with specificity.

[@Eltopshottah]

I love what google is doing with DOM manipulation!

[@Dygear]

Jakkkkkeeee! It's den-oh! #21:34

[@jakearchibald]

I think it's officially pronounced dee-no m.kzbin.info/www/bejne/iYrOq56Vn5ismJI

[@Extratone]

00:31 whoa buddy! your O scope should NOT be shocking you like that! especially since it doesn’t appear to be powered on... or physically connected to anything...

[@AaronGustafson]

So many awesome progressive enhancements!

[@sprwu2699]

cool :)

[@eduardofernandezdiaz5264]

Now we only have to tell people to start upgrading their browsers

[@dimitrisvain]

Specicifity! One take Jake! Oh....... nooooooooooooooo!!! 😄

[@schwarzarbyter]

i wish all web developers were that handsome

[@briannhinton]

More importantly where can I get that hot dog menu shirt?!

[@matimon]

Is this what responsive clothes looks like?

[@acomathes]

I find myArray.at(-1) really weird. I mean, we already have the myArray[-1] selector. Why not just make it work with -1? So, .at() is basically [], but it also accepts -1... weird

[@jakearchibald]

If we started JS from scratch, then array[-1] to get the last item would make a lot of sense. Unfortunately it wouldn't be compatible to add it now. It would change the behaviour of things like array[array.findIndex(conditionCallback)]

[@acomathes]

@@jakearchibald I understand. But then, why not a method like myArray.last() to avoid redundancy between .at() and []? 🤔

[@jakearchibald]

@@acomathes it was considered (there was even a array.lastItem proposal), but .at() also allows you to get, say, the 2nd last item.

[@sheepdogbenable]

Thank goodness we don’t need to worry about IE anymore 😅

[@Narblo]

We still have css and html? That's so vintage OMG

[@H3rminus]

SPECICIFITY

[@ch8rt]

Giving me Nina and the Neurons vibes

[@warren488]

credit to jake for pronouncing specificity wrong every time lmaooo

[@leonhma]

14:13 😂

[@saschab.5154]

Really hate pop-ups. :( But accent-color is cool, thanks!

[@n_mckean]

Specicivity.

[@michaelmorris4515]

Still waiting for a JavaScript precise currency math handler. Floating Point math is NOT ideal for these calculations, and while there are libs out there this really should be JS core.

[@Baulsulemansorkar]

🇧🇩

[@bepd]

form:has( .submit:not( :disabled ) ) { /* Welcome to nested CSS hell, future maintainer! */ }

[@Mythix2]

it feels like watching a children show

[@a.j.hinton4534]

Who else caught the rick roll?

[@BillyBraga]

I came to the comments to see if I was alone who noticed. Never thought that'd happen in a google video.

[@lienthi1922]

Hello

[@acemav]

I am scared to be a web developer. The world is too immense.

[@miuziksongvedioromentikhor5118]

🍌💘

[@mtufail2305]

Feere wrong off

[@johnstavitiq]

Specifically, you pronounced specificity wrong every time.

[@DenisTRUFFAUT]

I would like structured cloning / transferable interface to accept DOM nodes, so we could send detached nodes to workers and vice-versa. Also need self.createElement inside Worker.

[@navanshu]

date-time-local or other time inputs are the worst input ever created. They don't respect the max/min and just cause errros.

[@Extratone]

here’s the description’s link list formatted in markdown so you don’t have to waste as much time as I did. gist.github.com/6e0898c4eec5308b7580d87ba175324a