Nice! Would love to use it some day when the support is more widespread, but I can already see this being a great addition with basically no effort! Also glad to see that CSS is growing so rapidly with new features that we've really longed for :)
Nice property, but only supported by Chrome for the moment 😢 (44%). I will continue to use your previous tips with grid 0fr to 1fr for the moment. But I'm really excited by this new feature.
Unfortunately that doesn't work anymore in FireFox. The browser does not accept 0fr, so you have to set it to 0, but then the change does not get animated.
Thanks Kevin, your content should be considered required viewing for web devs at any level. I've been fluctuating between front and back end dev from almost the beginning of the www, and I still learn from you. Your work is invaluable and appreciated.
I love you I love you I love you. The amount of synchronizities with your posting and my day-to-day work use cases is insane. I have to make a toggle tab for you videos...
Added to my reset when I saw the previous video about interpolate-size. It’s sooo exciting!!! What else is coming up ?! I’ve been commenting for a year for more content on view-transitions and I believe that was mentioned recently as being in the queue! Can’t believe it’s almost been a year since I first heard about it on this channel !! Def some syntax has changed , I’m eagerly awaiting the next video on it !
view transitions suck because I can't have view transitions on the page itself such that they swipe left and right like on mobile (or _on_ mobile for pwas) and also have view transitions on the specific pages for microanimations. If I try to add a view transition to an element on a page that also has a view transition itself, then both the microanimation and the page view transition will run every time. lame
This is super great. As with the other ways of doing this sort of transitioning on height using css, including the grid hack there is an issue that I have encountered and that is if you e.g., have a drop down inside the container that has its height transitioned, then it can't extend and grow past its containing block due to the overflow: clip or overflow hidden
I really appreciate seeing new approaches to niche issues like that, however, it's always a big let down to see the browser compatibility after being stoked. Would be nice to mention that upfront.
These upcoming properties are quite nice to have shown in channels as yours, but if you're willing to take requests, it would be very helpful to have a video of yours in a while from now when some of these newer properties have already grown in browser adoption. Cheers
I think in this case working with clip-path would also do the job. Something like: nav { overflow: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 2s ease, visibility 2s; // rest } button[aria-expanded="true"] + nav { clip-path: inset(0 0 0 0); // rest } ...or am I missing something?
Awesome! I've been using your grid template columns trick for a while but glad this is a lot easier now My question though is can it transition from auto to auto? For example, if a child element changes size and the parent expands with it
Got a video on that coming in 2 weeks. It's possible with this, yes, but you need to do a little bit more to get it working. It's still very minimal though!
Highly recommend reading the article Kevin linked about interpolate size, but imo interpolate size is better. You can put it in the root and it suddenly works for the whole site for every browser that supports it, but it also doesn't break browsers that don't support it like calc-size could.
I wonder if there's a performance hit when adding it to :root, since the browser might need to calculate more sizes than it needs for rendering. If there's no performance hit, then it seems like a nice addition to include in a reset.css file. Edit: After reading the chrome dev post, seems like setting it on :root is actually recommended, so that's enough for me to add it to my reset. Now I just need to remember that animating intrinsic size values is finally possible.
I'm a little confused. Is this not what animate discrete was for? I haven't had a chance to play around discrete animation myself yet, so i might be getting muddled
Thy for it, but isn’t there a problem with visibility ? I used visibility a time ago for the nav bar , but if u make it hidden , the content was still in place . I mean u can’t see it but it was still there. So the problem was if I wanted to scroll over this area or slide with the finger there , it wasn’t possible because the content is still in the way . I guess I miss to reduce the width or the height to 0 too. Another point , what many other also say, server support ist really so Bad, so sadly not that useful currently.
doesn't transitioning to `calc-size(auto)` also work, which is like `auto` but you can transition on it? But when it comes to browser support it seems like every browser version that supports `interpolate-size` also supports `calc-size()` and the other way around meaning it basically doesn't matter what you use
If all that is needed is leaving the property at the top in the root, is there a downside to using it? Is it possible that it will be a default for CSS styling moving forward and does not need to be declared by the developer?
No, they made it opt-in on purpose, and that won't change. There was discussion about making it the default, but there are people who put animations/transitions on things knowing that it wouldn't work with `auto`, and there's potential clashes with JS solutions that are in place to deal with it. Better to make it opt-in like they did. It's basically a new property that's on all elements by default, with inherit as the default value. Also, no harm in having it on the root at all, since it's inherited. Same as setting a font-size on your root/html/body, or a color, etc... just gets inherited by everything else. Much better than having to use the * selector :)
They can both be implicit sizes :) - and, if you use calc-size() along with it, you could even do something where you use "auto" but add 2rem, or whatever you want. It's pretty neat.
I'm Sorry Kevin. Last Summer you provide a similar effect using allow-discrete for transition property. Can you explain relationship between this approach and the previous One?
The problem with browser support at the beginning is most of my content is ever-green, and it'll be out of date tomorrow. I've put a link to the support table in the description though.
Is this what caused the firefox exploit CVE-2024-9680 (CVSS score: 9.8)? It mentions exploiting a use-after-free in Animation timelines, but no specific css is provided.
when possible, transforms and opacity are definitely the way to go, but sometimes you do need to deal with widths and heights and transforms don't cut it. Until now, it's either meant hacks (there's a way to do this with some grid trickery), or javascript. This is a better option than either of those, by a long shot. As usual, you'd always want to pay attention to performance, and also think about potential repaints if the item is in the regular flow.
There was talk about it, but like most things css-related, there can be old sites where they were doing transitions on height, but purposefully didn't want it for `auto`, knowing it wouldn't work, and this could cause those to break. Easy enough to have a one-liner to add it in, specially since it is just a one-liner, and not something we need to add everywhere we need it.
Highly recommend reading the article Kevin linked about interpolate size, but imo interpolate size is better. You can put it in the root and it suddenly works for the whole site for every browser that supports it, but it also doesn't break browsers that don't support it like calc-size could.
@@Clonephaze2327 You can use calc-size with @starting-style and get the same progressive enhancement effect. So that's why I was wondering. Hope he'll do a video about that
:root { interpolate-size: allow-keywords; } (Option 1 - This is the recommended approach) Chrome - version 129 Edge - version 129 (even if caniuse etc says its not, its working) Firefox - not yet? Safari - not yet? width: calc-size(auto, size); Chrome - version 129 Edge - version 129 Firefox - not yet? Safari - not yet?
have you ever worked with oracle?? if you did you should make videos on that. Also, have you learned pseudo coding ? If you have I think you'd be really good at teaching that .
As ever, big round of applause for the CSS Working Group, who seem to have come up with exactly what we've needed again.
20 years later...
"Hold my dingdong" -The browser support working group
Nice! Would love to use it some day when the support is more widespread, but I can already see this being a great addition with basically no effort! Also glad to see that CSS is growing so rapidly with new features that we've really longed for :)
The grid trick, which I learned from you, works well and has browser support :). Thank you for your videos.
It doesnt have browser support, check caniuse
Nice property, but only supported by Chrome for the moment 😢 (44%).
I will continue to use your previous tips with grid 0fr to 1fr for the moment.
But I'm really excited by this new feature.
Exactly my thoughts.
Unfortunately that doesn't work anymore in FireFox.
The browser does not accept 0fr, so you have to set it to 0, but then the change does not get animated.
@@rankarat Yup, wonder why he did not mention it?
@@DocGenius42 oh no!!!
@@KB04 he already made a video about it in the past or did you mean the browser support?
Thanks Kevin, your content should be considered required viewing for web devs at any level. I've been fluctuating between front and back end dev from almost the beginning of the www, and I still learn from you. Your work is invaluable and appreciated.
I love you I love you I love you.
The amount of synchronizities with your posting and my day-to-day work use cases is insane.
I have to make a toggle tab for you videos...
Added to my reset when I saw the previous video about interpolate-size. It’s sooo exciting!!! What else is coming up ?!
I’ve been commenting for a year for more content on view-transitions and I believe that was mentioned recently as being in the queue! Can’t believe it’s almost been a year since I first heard about it on this channel !! Def some syntax has changed , I’m eagerly awaiting the next video on it !
view transitions suck because I can't have view transitions on the page itself such that they swipe left and right like on mobile (or _on_ mobile for pwas) and also have view transitions on the specific pages for microanimations. If I try to add a view transition to an element on a page that also has a view transition itself, then both the microanimation and the page view transition will run every time. lame
This is super great. As with the other ways of doing this sort of transitioning on height using css, including the grid hack there is an issue that I have encountered and that is if you e.g., have a drop down inside the container that has its height transitioned, then it can't extend and grow past its containing block due to the overflow: clip or overflow hidden
Cool! But now we will wait for browser support :D
For real, all these features are cool but it sucks we can't really use them for at least 2 years or so.
Not great, but it's perfect for a progressive enhancement :)
@@Action2me At least this isn't the days of Internet Exploder 6, when browsers just weren't getting updated. At all. For. Years. 😊
All these new css features looks amazing but for now, with limited browsers support, its just more of a curiosity than a production useful thing.
I had just been searching for the latest on this last night and here we are bright and early. Thanks, Kevin!
I was really excited, then I went to caniuse. But can't wait for this to drop everyhwere!
Great timing! I'm just evaluating sliding in a help panel. This is perfect
I love your videos and that you seem to care about accessibility. It is refreshing in a world where it feels like an afterthought to most
You read my mind, Kevin. I was just writing a transition delay on visibility 2 days ago smile😄
This was long time longing. Thank you
Finally 🎉 how long have we all been dreaming about this actually working in a browser 🤯
So much great new CSS this year!
gotta wait for some time for clients to use updated browsers to even utilize this yet its a great addition and really handy.
Looks awesome. Thank you for the tip
This is awesome! 👍
Thank you so much for the new concept
I just get used to approach with transitioning grid fr's, and now we have this new thing. Have a mercy, CSS, not so fast.
The coverage of this property need to be boosted!!!!
I really appreciate seeing new approaches to niche issues like that, however, it's always a big let down to see the browser compatibility after being stoked. Would be nice to mention that upfront.
Surely a “new” feature would always have pretty bad browser compatibility to begin with? Why would that not be expected?
thats a very good tip!
Finally they've implemented this!
These upcoming properties are quite nice to have shown in channels as yours, but if you're willing to take requests, it would be very helpful to have a video of yours in a while from now when some of these newer properties have already grown in browser adoption. Cheers
What a time to be alive!
Wooooow. Finally after ages!
Nice!
Instead of the visibility to disable the mouse you could use pointer-events: none/all 👌
Yet again you come up with the goods, thanks. I'd really like to know when and why you'd choose to target an attrbute rather than a class?
best new feature in YEARS!
I did a animation with width like it which was many lines.To do it simply like this awesome
I think in this case working with clip-path would also do the job. Something like:
nav { overflow: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 2s ease, visibility 2s; // rest }
button[aria-expanded="true"] + nav { clip-path: inset(0 0 0 0); // rest }
...or am I missing something?
Using interpolate I find is very good👍
WOW! what a great tip!!
Really awesome, tanks!
Was this the whole reason we loaded gsap? And can we just get css to do it all, and simpler (lighter)? Thanks, Kevin!
Awesome! I've been using your grid template columns trick for a while but glad this is a lot easier now
My question though is can it transition from auto to auto? For example, if a child element changes size and the parent expands with it
Should work, though I haven't tested that use case
@@KevinPowell Really hope it does! That'd help me reduce quite a bit of JavaScript
Could you use that to animate the opening of an element, without using JS and some hack using a label?
Yes
Got a video on that coming in 2 weeks. It's possible with this, yes, but you need to do a little bit more to get it working. It's still very minimal though!
Great video
Combined with the upcoming ::details-content this should make it really easy to make beautiful animated accordions :)
Got a video on that coming in a few weeks!
What about the calc-size() function?
Highly recommend reading the article Kevin linked about interpolate size, but imo interpolate size is better. You can put it in the root and it suddenly works for the whole site for every browser that supports it, but it also doesn't break browsers that don't support it like calc-size could.
@@Clonephaze2327 That's right!
this was insane
I wonder if there's a performance hit when adding it to :root, since the browser might need to calculate more sizes than it needs for rendering. If there's no performance hit, then it seems like a nice addition to include in a reset.css file.
Edit: After reading the chrome dev post, seems like setting it on :root is actually recommended, so that's enough for me to add it to my reset. Now I just need to remember that animating intrinsic size values is finally possible.
Is there a performance hit to having it on the root? Or does being able to put it on an element at atomic level just give better granularity?
Have you work in state management ? these can be worked from library
So what's the default value for interpolate-size? And why isn't the default value allow-keywords?
Hopefully interpolate-size just gets added into core CSS at this point
Hello, Nice content here. What VS code theme you use?
Hallelujah, brothers!
I'm a little confused.
Is this not what animate discrete was for?
I haven't had a chance to play around discrete animation myself yet, so i might be getting muddled
Is there a way we can use this to put a transition on the details element when it is opened and closed?
Is there a reason not to have this in root or body as part of a css reset for all projects?
I need that ascii owl shirt
Me too 🦉
Thy for it, but isn’t there a problem with visibility ? I used visibility a time ago for the nav bar , but if u make it hidden , the content was still in place . I mean u can’t see it but it was still there. So the problem was if I wanted to scroll over this area or slide with the finger there , it wasn’t possible because the content is still in the way . I guess I miss to reduce the width or the height to 0 too. Another point , what many other also say, server support ist really so Bad, so sadly not that useful currently.
doesn't transitioning to `calc-size(auto)` also work, which is like `auto` but you can transition on it? But when it comes to browser support it seems like every browser version that supports `interpolate-size` also supports `calc-size()` and the other way around meaning it basically doesn't matter what you use
no full browser support yet :(
And browser support?
Awesome ! Thanks Kevin 🙏
If all that is needed is leaving the property at the top in the root, is there a downside to using it? Is it possible that it will be a default for CSS styling moving forward and does not need to be declared by the developer?
No, they made it opt-in on purpose, and that won't change. There was discussion about making it the default, but there are people who put animations/transitions on things knowing that it wouldn't work with `auto`, and there's potential clashes with JS solutions that are in place to deal with it. Better to make it opt-in like they did. It's basically a new property that's on all elements by default, with inherit as the default value.
Also, no harm in having it on the root at all, since it's inherited. Same as setting a font-size on your root/html/body, or a color, etc... just gets inherited by everything else. Much better than having to use the * selector :)
@@KevinPowell Thank you for that explanation
❓ Is it now possible to transition between two states with implicit size, or does one of the states still need to have an explicit size?
They can both be implicit sizes :) - and, if you use calc-size() along with it, you could even do something where you use "auto" but add 2rem, or whatever you want. It's pretty neat.
Wow! That was a long awaited feature! ❤
Not yet working in Brave & other Chromium forks, but hopefully very soon!
20 years waiting for this property
For hamburger menu in an example like this, what are the cons of simply using translate(-100%)?
I'm Sorry Kevin.
Last Summer you provide a similar effect using allow-discrete for transition property.
Can you explain relationship between this approach and the previous One?
Is it possible to animate from two auto values or is it only a fixed value to auto?
Browser support at beginning of videos, please!
The problem with browser support at the beginning is most of my content is ever-green, and it'll be out of date tomorrow. I've put a link to the support table in the description though.
Is this what caused the firefox exploit CVE-2024-9680 (CVSS score: 9.8)? It mentions exploiting a use-after-free in Animation timelines, but no specific css is provided.
This is not implemented on Firefox
nice trick, but how performant is it? I think that animating width, paddings, margins has been discouraged in favour of transform
when possible, transforms and opacity are definitely the way to go, but sometimes you do need to deal with widths and heights and transforms don't cut it. Until now, it's either meant hacks (there's a way to do this with some grid trickery), or javascript. This is a better option than either of those, by a long shot. As usual, you'd always want to pay attention to performance, and also think about potential repaints if the item is in the regular flow.
what is the browser support?
Is this possible with tables? :D
Just need all the browsers to implement it now lol
THAT'S IT! I'M GONNA CELEBRATE AND GET DRUNK WHILE TOGGLING ACCORDIONS AND DROP DOWNS TO AUTO HEIGHT!
so simple, but how has it taken this long to go from 0 to auto (this should have come before nesting)
Now we just need more browser support for it. Currently, only Chrome has it.
Ugh, this is so disappointing. I got all excited that this could actually be used, but it seems we're a few years away from that 🫤
now i can be happy
Height is dead. Long live block-size 🎉
Why was this not included and made the default behavior 15 years ago?
lol, why heck were you doing that at 3:30? You don't even use it ;)
interpolate-size currently only works on Chrome 😢
only works on chrome so far?
Why not make it default?😮
Why isn't this just applied by default, instead of needing to be added to a reset css?
There was talk about it, but like most things css-related, there can be old sites where they were doing transitions on height, but purposefully didn't want it for `auto`, knowing it wouldn't work, and this could cause those to break. Easy enough to have a one-liner to add it in, specially since it is just a one-liner, and not something we need to add everywhere we need it.
@@KevinPowell Thanks for the reply and insight!
"box-sizing: border-box" has a baby brother
still not widely supported yet
YESSSSSSSSSSSSSSSSS
Finally i can do pure css without using jquery or fixed height length
Another long-long-long-awaited feature that you cannot use anyway in the real world because of browser support XD
Finally!!!!
Yay 🎉
I thought they invented calc-size for exactly that. So do we have two ways for this now? What are the differences?
Highly recommend reading the article Kevin linked about interpolate size, but imo interpolate size is better. You can put it in the root and it suddenly works for the whole site for every browser that supports it, but it also doesn't break browsers that don't support it like calc-size could.
@@Clonephaze2327 You can use calc-size with @starting-style and get the same progressive enhancement effect. So that's why I was wondering. Hope he'll do a video about that
cooool :D
No word about browser support?!
:root { interpolate-size: allow-keywords; } (Option 1 - This is the recommended approach)
Chrome - version 129
Edge - version 129 (even if caniuse etc says its not, its working)
Firefox - not yet?
Safari - not yet?
width: calc-size(auto, size);
Chrome - version 129
Edge - version 129
Firefox - not yet?
Safari - not yet?
Link to the browser support table in the description :)
1:26 ur welcome
browser support is till really bad
It literally just hit experimental, give it a few weeks for browsers to start implementation
Width:0; and width:100% default works this animation
Yeah right
Looks great, but there’s one “but.” :)
have you ever worked with oracle?? if you did you should make videos on that. Also, have you learned pseudo coding ? If you have I think you'd be really good at teaching that .
Why not mention that this is still poorly supported? Works only in chrome as of now if you check caniuse