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 :)
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...
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.
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 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?
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
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!
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
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.
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.
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 :)
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.
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?
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
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.
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
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.
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.
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.
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 .
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?
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 :)
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.
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
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...
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?
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
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
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
This was long time longing. Thank you
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
Looks awesome. Thank you for the tip
Thank you so much for the new concept
You read my mind, Kevin. I was just writing a transition delay on visibility 2 days ago smile😄
Finally 🎉 how long have we all been dreaming about this actually working in a browser 🤯
So much great new CSS this year!
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. 😊
This is awesome! 👍
gotta wait for some time for clients to use updated browsers to even utilize this yet its a great addition and really handy.
WOW! what a great tip!!
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.
Wooooow. Finally after ages!
Really awesome, tanks!
thats a very good tip!
What a time to be alive!
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.
Finally they've implemented this!
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?
I did a animation with width like it which was many lines.To do it simply like this awesome
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?
The coverage of this property need to be boosted!!!!
best new feature in YEARS!
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
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?
Great video
1:26 ur welcome
this was insane
Using interpolate I find is very good👍
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!
Nice!
Instead of the visibility to disable the mouse you could use pointer-events: none/all 👌
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
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!
Was this the whole reason we loaded gsap? And can we just get css to do it all, and simpler (lighter)? Thanks, Kevin!
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.
"box-sizing: border-box" has a baby brother
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!
Hallelujah, brothers!
Hopefully interpolate-size just gets added into core CSS at this point
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?
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
I need that ascii owl shirt
Me too 🦉
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?
THAT'S IT! I'M GONNA CELEBRATE AND GET DRUNK WHILE TOGGLING ACCORDIONS AND DROP DOWNS TO AUTO HEIGHT!
Hello, Nice content here. What VS code theme you use?
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.
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?
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
Awesome ! Thanks Kevin 🙏
20 years waiting for this property
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.
Just need all the browsers to implement it now lol
Not yet working in Brave & other Chromium forks, but hopefully very soon!
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
cooool :D
Is there a way we can use this to put a transition on the details element when it is opened and closed?
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.
Finally!!!!
now i can be happy
Is there a reason not to have this in root or body as part of a css reset for all projects?
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
no full browser support yet :(
❓ 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! ❤
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 🫤
For hamburger menu in an example like this, what are the cons of simply using translate(-100%)?
Yay 🎉
what is the browser support?
Height is dead. Long live block-size 🎉
And browser support?
lol, why heck were you doing that at 3:30? You don't even use it ;)
Is this possible with tables? :D
Is it possible to animate from two auto values or is it only a fixed value to auto?
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!
Another long-long-long-awaited feature that you cannot use anyway in the real world because of browser support XD
Finally i can do pure css without using jquery or fixed height length
About time! Hahahah
Why was this not included and made the default behavior 15 years ago?
YESSSSSSSSSSSSSSSSS
only works on chrome so far?
Width:0; and width:100% default works this animation
Yeah right
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 .
browser support is till really bad
It literally just hit experimental, give it a few weeks for browsers to start implementation
so simple, but how has it taken this long to go from 0 to auto (this should have come before nesting)
Why not make it default?😮
interpolate-size currently only works on Chrome 😢
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
Looks great, but there’s one “but.” :)
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 :)
Finally...