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:

#GoogleIO

[ChromeDevs]

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

[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

[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!

[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.

[mryechkin]

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

[vilinskyy]

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

[Wldgeist]

"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.

[arcanernz]

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

[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 !

[VBDesignsable]

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

[AhmadAwais]

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

[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.

[PeterSahanaya]

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

[canarymultimedia]

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

[drnicwilliams]

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

[iamfrankstallone]

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

[AmxCsifier]

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

[omarjab]

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

[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