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.
CoverFlow without Safari support is a nice touch :) But seriously, the updates are impressive! Love to see accessibility details and small nuanced fixes 👌
"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.
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.
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 !
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
🔥 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.
@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?
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.
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!
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.
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.
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.
@@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?
@@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.
he already covered a lot of these new features, container queries, viewport units, style queries, new CSS pseudo-classes :has() , nth-child new popover and ...
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 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.
Whoa! So much great stuff! Thanks for a great video, Una, as always!) З.і.: пасхалочку з кольорами українського прапору помітив)) Дяки)) Все буде Україна!)
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.
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 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
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.
@@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"?
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?
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.
![Chino Pacas - Modo Capone (with Drake & Fuerza Regida) [Video Oficial]](http://i.ytimg.com/vi/zjv8TQ0gBkg/mqdefault.jpg)
Want to learn more about these announcements? 🤔 Ask the Chrome Dev team in the comments below. 👇👇🏻👇🏿👇🏽 👇🏾👇🏼
Yes, I'm interested in learning more!
What are some good resources that you would recommend?
Can all developers of chrome team remember all of these?
Why isn’t there a :for selector for matching labels with inputs? :(
Yes interested
What about compatibility in the most common browsers?
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
🫡
thanks!
@ragavkumarv thanks
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!
Finally a customizable select! Just as I finish building one with React Aria 😅
Im just starting with react aria. Lol
Do a re-write 😂
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.
Trigonometric functions actually have wide browser support! Chrome was last -- web.dev/css-trig-functions/
CoverFlow without Safari support is a nice touch :)
But seriously, the updates are impressive! Love to see accessibility details and small nuanced fixes 👌
Let Safari die already
"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.
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.
Babel
Love the new architectural foundations. Sass features in native css.
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 !
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)
@@unakravets4368 love that 🔥
wow so many amazing quality of life improvements packed here!
Fabulous summary of a wonderful set of new css features. It’s great to have less JS in my life.🎉
Awesome time to be a web developer, thank you Una.
It sure is!
selectmenu 🔥👌
Cool stuff, but one major thing essential for form styling is still missing out in Chrome: subgrid support.
Soon!
game changing updates
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
The container queries are really handy especially you working on component based, it become really helpful
10 years ago this was all science fiction, amazing to see this much advancement.
🔥 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.
that's dope, i'm so happy about these new updates
@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?
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
finally dynamic viewport units! The dynamic viewport was painful experience to overcome
Loooooong overdue. Can't wait to finally use these new features!
It would be nice if you updated the video description with all the links you QR coded! 😅
Finally this solution with 100vh, no messing around anymore for cross browser support. awesome. top layer also nice
What is the difference between dialog and popover and when should we use one or the other?
Can't wait for firefox to catch up so we can start using these..
so much cool helpful new stuff, thank you for a great video!
Great job Una! Great delivery!
Thank you, Una!
"I'll see you online" may be my new favorite catch phrase!
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?
This was not possible before in vanilla CSS
learn something properly before even thinking about starting a career in it.
So we are back to stufing logic deep into the layout and design?
Got it 😄
Love to see new features ❤.
oh finally select menu update... !! awesome development. Thank you ! :)
Can't wait to use these in a couple of years
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.
A lot of great features. Wow!
Awesome! I envy already future web developers :)
Super exciting stuff!
when will the updates roll out?
I just want the damn and to be part of the properties for every tag and not be a standalone tag for gods sake
The CSS :has property have saved my life this week
LET'S GOOOOOOOOOOOOOOOOOOOOOOO!
Awesome additions!
Amazing developments as always!
Is there anything interesting that has been added to CSS after this video?
I love those new viewport units
Amazing content!
So coooool👏
Dynamic viewport height finally, gosh. {insert Michael thank-you.gif}
Wonderful
This is incredible!
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!
well done !
is there a css to display custom page numbers when we print the page for dynamic content
Balance is so cool.
this is amazing
WOOOOOW!!! I can't wait 😄
Amazing to see Chrome taking Open source initiatives to make the web better!
Sad how Firefox has the least adoption!
Firefox follows the web standard, Google makes their own, just like MS did with IE
can I access the presentation please?
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.
Can you send a reduced test case? Are you trying to use color-mix() or blend modes?
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
Web UI = Web user interface (development)
FINALLY Display: none animation support
Are there transcripts or accompanying blog posts?
Yes! developer.chrome.com/blog/whats-new-css-ui-2023/
Hey, what's that monospace font in the examples?
Google Sans Mono
@@unakravets4368 Thanks!
Great presentation! Very clear and precise!
So CSS really is turning into a turing complete paradigm, interesting
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.
all of this only available for chrome rite?
There are browser support tables on most of the slides!
Finally a select menu . goddamn .
Which we could have a search inside the select element without third party..
nice use of the word 'duplicitous'
Fun fact: filming day was the day I learned how to actually pronounce it correctly 😆
10:59 What's the use of CSS scope here? As we have CSS nesting and we can do the same using it?
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.
@@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?
@@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.
@@quietfox157 Got it. Thanks for the explanation. 😃
These are too good 😭
Remeber last year and your shouts about subgrid? Gues what? We're still waiting ;-)
It's coming soon!
@@UnaKravets 113 or 130 rather? 😉😁
ah, the forever close-but-not-there-yet UI platform, almost able to make a dropdown with it
@kevinPowell i would love to hear your thoughts (:
he already covered a lot of these new features, container queries, viewport units, style queries, new CSS pseudo-classes :has() , nth-child new popover and ...
9:18 damn, really killshot SCSS here lol
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.
@@quietfox157 man I haven't written actual CSS in a long time, now I tailwind everything
@@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.
@@quietfox157 really exciting stuff happening nowadays!
Holy moly, being able to animate from display none will be so nice
Does anyone know what monospace font is used for the code in this presentation?
It's called Google Sans Mono
@@UnaKravets Great font, thanks Una. And great job on the video 👍
Whoa! So much great stuff! Thanks for a great video, Una, as always!)
З.і.: пасхалочку з кольорами українського прапору помітив)) Дяки)) Все буде Україна!)
☺
When did Google seize control of the Internet from w3c?
All of the APIs implemented go through the w3c standards process
@@unakravets4368 Good to see you check it with the Google staff at w3c. The Internet is now owned by .
I don’t come u with use cases when to use color-mix
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.
Firefox is the new IE 😅 there are several APIs without support.
Why firefox supporting nothing? Are they being squeezed out the the browser market?
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
I dont know what you mean about flutter, in web ??
@@_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
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.
@@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"?
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?
Why dom manipulation is only limited to JS? We need browser to support direct calling of Web apis without js
What APIs for example and how would you "call" them? HTML and CSS cannot "call" anything.
how do i super like a video?!
is the background and the room legit or fake? xD
finally no need SASS for css nesting
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.
Can you share a link for some context?
Prooooo
text-wrap: balance is HUUUGE 5:40
display: none is the reason a lot folks are using animation libraries 😁
I probably wont live long enough to see Safari and FF to implement this lol
We now have math and try/catch mechanics in CSS ... 😂👌
Ah ok so this video is for the developers..I was not getting!!
sTOP allowing popup windows asking for passwords and such
Unfortunately, Safari and especially Firefox hang far behind, but I continue to hold to the weak, sorry Chrome.