Now wait 2 years before this reaches stable browsers. Another 3 years before it reaches 98% users compatibility. Another 5 years before you can use it in a serious company because nobody wants to use a broken website when you're making money
@@drprdcts Not how it works. They would be using a polyfill to provide the missing javascript functions in unsupported browsers. They provide manual javascript implementations that will be slower, but only provide the missing functionality when the browser version does not natively support the function. Odds are what will happen is that their existing code already uses polyfills based on early version of these functions from years ago. When people have a browser with the function built in, the page will use less cpu power and drain your device battery less if it has one.
@@drprdctsexactly. If those issues were adressed a bit more quickly, we wouldn't have to wait until retirement to usd them! Why can't they just implement new features quicklier? And even then, almost no one updates their browser. So annoying.
@@dopetag it's not really that much of a bait, since browsers today update regularly and we probably get this supported in 90%+ till the end of the year
the variable definition in css is already outta control, since minifier use this to hide some properties in var, then other var combines other var and so on ...
It was always a programming language and like all pl it continues to improve...this very much like a few others that have come out is just sheer beauty
Knowing Firefox, they'll take over 5 years to add something like calc-size(). I hate how slow they are at adding features that has been in the other browsers for over 2 years.
@@3pcgi959 No it doesn't. Go ahead and check caniuse, and notice if you search calc-size, it wrongly looks up aspect-ratio. MDN has no documentation on calc-size either. At least Firefox finally added CSS property in the recent update.
The support info on @starting-style is a little bit outdated. Firefox has support for it starting in version 129. Unfortunately, it does not yet support transitions to and from `display: none;` which is probably one of the main use cases for it. Caniuse is now also updated to reflect that.
It's funny how when I first started watching your videos I was listening and not fully understanding what you were teaching.. Now it all makes sense. Thank you for your amazing videos!
I would move things like calc-size() into an @supports rule. This gives you the chance to design both states independently (if you want to be very specific). Well explained video and I can't await browser support will be better.
CSS guys: Let's fix the auto animations so people can do "height: auto" and it just works Also CSS guys: Oh wait, let's keep them on their toes and require them to use a function for that like "height: calc-size(auto)" ...
Everytime I hear about a new css feature, it excites me and makes me sad at the same time. Something as simple as text-wrap does not work in relatively new mobile browsers e.g. ios 14-15 safari. I really wish to see a day where every browser vendor will update on the same day. Probably dreaming.
It's interesting, but since doing this JavaScript with Framer Motion works on browsers that don't support these features yet (which is most browsers), it's better to strict to the JavaScript route at this time.
This @starting-style feature, can it work with "intersection observer", waiting for the browser/user to be on the page/section before animating? Just like gsap does?
u can do that easily without this new trick.. each element has scrollHeight which is the height of its content and it works even if the element itself has height 0, so what you can do is u can run a script to just take the element scrollHeight and set it as a CSS variable on the element style (this is done just once) and then you animate to height var(--content-height), this is a super easy solution and should work everywhere, no need to wait for global support
Why don't browser makers implement animating height to auto instead of creating a whole new rule attribute of calc-size: auto? Wouldn't that logically make more sense rather than everyone having to remember this new attribute?
Because changing how something works is generally a no-no in web dev. It's why so much old JS is janky and they have to keep adding on. If you change how existing functionality works, you end up breaking things that rely on it working the way it currently does.
Chrome is showing `invalid property value` for `height: calc-size(auto);` - version 126.0.6478.127 - am I doing something wrong? PS. Love your vids, so keep them coming :)
I got excited and used @starting-style as a progressive enhancement it went live and caused a memory leak in production and it took 10 devs to track it down. Be careful!
Could be because of “backward compatibility”…there are probably people who used “auto” and didn’t want any animation-but if you just make animation the default, those people would get results they didn’t expect and as you would imagine, this can ruin a lot of websites introducing a new function means “only those that are interested, can turn it on, instead of turning it on for everyone using html”
ok, another piece of crap that will be introduced in 100 years... we continue to use grid-template-rows: 0fr; + transition: grid-template-rows; + :hover {grid-template-rows: 1fr;}
Finally! No more max-height or single column grids to get accordion to work.
Now wait 2 years before this reaches stable browsers. Another 3 years before it reaches 98% users compatibility. Another 5 years before you can use it in a serious company because nobody wants to use a broken website when you're making money
I made it work with several columns and max-height
@@drprdcts Not how it works. They would be using a polyfill to provide the missing javascript functions in unsupported browsers. They provide manual javascript implementations that will be slower, but only provide the missing functionality when the browser version does not natively support the function. Odds are what will happen is that their existing code already uses polyfills based on early version of these functions from years ago. When people have a browser with the function built in, the page will use less cpu power and drain your device battery less if it has one.
@@drprdctsexactly. If those issues were adressed a bit more quickly, we wouldn't have to wait until retirement to usd them! Why can't they just implement new features quicklier? And even then, almost no one updates their browser. So annoying.
This can also be done using CSS Grid
wow, new cool css features! can’t wait to use them in 2034
😂
🤣
It works already in all browser
@@3pcgi959 not mine
Nice, now everyone who downloads Canary and enables the experimental flag will be able to see my animations
yes, the title is such a clickbait
😂
@@dopetag it's not really that much of a bait, since browsers today update regularly and we probably get this supported in 90%+ till the end of the year
It's like CSS is slowly becoming a programming language: 3
the variable definition in css is already outta control, since minifier use this to hide some properties in var, then other var combines other var and so on ...
which is fine in my opinion.
that would actually be an improvement, because we had rules and syntax for best practice.
It was always a programming language and like all pl it continues to improve...this very much like a few others that have come out is just sheer beauty
Isn’t that what it literally is?
good job , in html use and
@3:35 asking for 20+ years
Knowing Firefox, they'll take over 5 years to add something like calc-size(). I hate how slow they are at adding features that has been in the other browsers for over 2 years.
It works already in all browser
@@3pcgi959 No it doesn't. Go ahead and check caniuse, and notice if you search calc-size, it wrongly looks up aspect-ratio. MDN has no documentation on calc-size either. At least Firefox finally added CSS property in the recent update.
I was just trying to do this a couples of hours ago, im so glad we can finally do this :)
The support info on @starting-style is a little bit outdated. Firefox has support for it starting in version 129. Unfortunately, it does not yet support transitions to and from `display: none;` which is probably one of the main use cases for it. Caniuse is now also updated to reflect that.
Wow, now I need to update all my accordian & FAQ components. Thanks
It's funny how when I first started watching your videos I was listening and not fully understanding what you were teaching.. Now it all makes sense. Thank you for your amazing videos!
There are some realy good solutions to this already using grid, but having this out of the box is amazing.
Amazing video ty Kyle. You should make a video announcement when these features go online with a callback to this video
This are great new features and will turn the styling animation process more ease to do.
This is really amazing . Thank you for the great video.
I am FE dev since 2011. What I use for animating height this days is react-spring. But regarding CSS auto height I can say only this: at last!
CSS grid is a great way, and fully supported.
I would move things like calc-size() into an @supports rule. This gives you the chance to design both states independently (if you want to be very specific). Well explained video and I can't await browser support will be better.
Great news! Im not sure which feature I like more
Thank you Kyle.
CSS guys: Let's fix the auto animations so people can do "height: auto" and it just works
Also CSS guys: Oh wait, let's keep them on their toes and require them to use a function for that like "height: calc-size(auto)"
...
Now they need find a way to update browsers remotely somehow so we can actually use these and not wait 5 years each time
OMG!!!! Been waiting for this for 10 years while I've been working! Thanks Kyle!
The first example can be solved with grid and toggle between grid-template-rows; 0fr and 1fr.
hey how you move ur head like that all the time 😅
What will Tailwind do? 🤣
😂😂😂
They need to pray hard 🤣
Everytime I hear about a new css feature, it excites me and makes me sad at the same time. Something as simple as text-wrap does not work in relatively new mobile browsers e.g. ios 14-15 safari.
I really wish to see a day where every browser vendor will update on the same day. Probably dreaming.
I've been waiting for this feature since I was in high school.
You can also utilize grid to do this.
If only our UX Designers were ok to have progressive enhancement and not about "we need all this on all browsers, especially Safari"...
It's interesting, but since doing this JavaScript with Framer Motion works on browsers that don't support these features yet (which is most browsers), it's better to strict to the JavaScript route at this time.
Animating from display-none to display-block has been my archenemy for years. Well, not anymore!
I just want the nesting of CSS to be as similar as the existing less and sass.
I was literally plagued by this issue just last week, haha. It took some doing to get working correctly for some reason.
Kyle is Love ❤❤❤❤
Thank you Kyle. 🤜🤛
i didn't expect for this feature. now no need to write ugly js for it anymore
JS ain’t ugly. javascript:void(0)
I found solution with grid.
In styled component something like this:
const CollapsibleContent = styled.div`
width: 100%;
display: grid;
grid-template-rows: ${({ $isOpen }) => ($isOpen ? 1 : 0)}fr;
transition: 0.8s ease-in-out;
`;
love your videos.
you should fix your posture bcuz its going to cause you pain later on.
please take care.
my hero
To get rid of the js, you could use the checkbox hack.
This @starting-style feature, can it work with "intersection observer", waiting for the browser/user to be on the page/section before animating? Just like gsap does?
Ooh, that’s nice.
You forgot the card for forwards at 6:10 :)
that's great! thank you
4:47 I wish it was a black box
Me to Javascript: „I don‘t want to play with you anymore.“
u can do that easily without this new trick.. each element has scrollHeight which is the height of its content and it works even if the element itself has height 0, so what you can do is u can run a script to just take the element scrollHeight and set it as a CSS variable on the element style (this is done just once) and then you animate to height var(--content-height), this is a super easy solution and should work everywhere, no need to wait for global support
Good info it's very useful
So sick!
Omg this was such a headache on one of my projects
Man! How long until calc-size(auto) is standard in all heavily used browsers?
For height animation Give
max-height: 0;
And in show class max-height: 1000px;
This will work.
Except that timing will be wrong.
How do i get the new update? Should I update my vs code and browser?
img {
Height : auto;
Width : value ( % )
}
If you set this then the image will become so responsive at the end.
how are you releasing this on the same day i spent 8 hours trying to do this exact same thing in a simple way?
3m topic in 13m video
This channel has its best years long behind it
CSS is so crazy
I just want to animate background: linear-gradient
Very useful thanks
Why don't browser makers implement animating height to auto instead of creating a whole new rule attribute of calc-size: auto? Wouldn't that logically make more sense rather than everyone having to remember this new attribute?
Because changing how something works is generally a no-no in web dev. It's why so much old JS is janky and they have to keep adding on. If you change how existing functionality works, you end up breaking things that rely on it working the way it currently does.
thanks
Nice
We really can’t, since it’s only available on canary chrome behind a flag.
CSS is getting fixed 🎉
nice 😀
But how to do with tailwind?
Bro can we also use fit-content for height or calc-size is better???
Finally!!
yay!
It’s about time😂
Chrome is showing `invalid property value` for `height: calc-size(auto);` - version 126.0.6478.127 - am I doing something wrong? PS. Love your vids, so keep them coming :)
You must be using the canary version of Chrome with experimental web features flag enabled
Ah, I think I need to turn on the experimental features within Chrome, or download Chrome Beda ~ I will try these now 👍
WAR IS OVERRR!
0:30 Bad dev simplified?)
The disappointment when there's not even a caniuse page. 😢
Works on Android 🎉
I got excited and used @starting-style as a progressive enhancement it went live and caused a memory leak in production and it took 10 devs to track it down. Be careful!
calc-size()? Why not just allow animation to/from auto instead of introducing a function?
Could be because of “backward compatibility”…there are probably people who used “auto” and didn’t want any animation-but if you just make animation the default, those people would get results they didn’t expect and as you would imagine, this can ruin a lot of websites
introducing a new function means “only those that are interested, can turn it on, instead of turning it on for everyone using html”
when coming to tailwind ?????
Unni browth
Very disappointed (and I feel a bit baited) that calc-size doesn’t really work yet
How is a document like this presented to a text to speech user? Is it accessible? If not it seems like you should not use it.
this is called progressive enhancement
I having trouble with stranparent sticky header of table can you share something my lord
Who are those people who use older browsers? 🤔
What is all of that head shaking damn...
Why do you shake your head so strongly? Is this some kind of condition?
Let's goooo
Anyone still watching this in 2041?
Slight flavours of click bait. Compatibility should have been first sentence.
Goddamit dude use a *BIGGER FONT* 🔭
I get a sore neck from watching your head constantly wobbling from side to side. It's very distracting.
ok, another piece of crap that will be introduced in 100 years... we continue to use grid-template-rows: 0fr; + transition: grid-template-rows; + :hover {grid-template-rows: 1fr;}
Please people. Don't use animations. Ever. Anywhere. The UI will *always* be better without them.
Videos getting worse IMO
pourquoi tu secoue autant la tete quand tu parle ?
I am first Kyle
Do you have some medical condition?
Make it shorter! I will not stay 12minutes in the morning for this....see you on the next try, bye!
Nice