Animate and do math on things like height: auto with interpolate-size and calc-size()

[@peterpancik]

"the purpose of calc-size() is to do calculations on sizes" :) love this (edit: browsing 12daysofweb. ... awwwwsome..)

[@MizManFryingP]

It's really cool that so many of these little hacks that we learned to deal with CSS are slowly going away as CSS is evolving

Don't hold back with your opinions about tailwind. You're among friends.

[@johanohly]

If it was gonna be specifically about that code snippet (and arbitrary variants) I totally agree. I love tailwind but I would never use that linear gradient snippet lol

[@clevermissfox]

😂 💯

[@vinerz]

@@johanohly Yeah, I love tailwind, but that class is a crime against humanity

[@christian-schubert]

C'mon, this is the INTERNET - - anything BUT friends! 😄

[@radadadadee]

lmao so true. I don't think anyone that follows Kevin could have any respect for tailwind. It'd be kinda strange since they're completely different paradigms.

[@paulp3992]

so cool. i used your table > grid/flex trick from another vid + this im hoping i can get a smoother transition!

[@normandrioux2529]

Very interesting with the bounce. When you have a few buttons that are part of a process and the page is kind of busy. The button you are at can just wiggle to bring your attention to it.

[@alvaroprietovideos]

🔥That is amazing!! Thanks for sharing! Lately is getting harder for me to keep up to date!

[@bbrixon]

I really have to figure out how to use these new CSS features in my websites. Thank you for your videos!

[@nomadshiba]

14:20 yeah!

[@alexpanteli3651]

Could make a video about page view transitions please

[@KevinPowell]

I have one in the works!

[@alexpanteli3651]

@KevinPowell good stuff

[@marielemaitre5006]

Thank you Kevin!!!

[@petrodut]

Would be great to animate from height: auto to height: auto (for example when content changes), but it's not working now...

[@stonebubbleprivat]

It does work when you animate the height of the element that you add into a container. If the elements height is animating so is the containers height

[@seandleary]

We're starting to run out of things we can't do with CSS!

[@mikeisfreeX]

So nice to hear that many of my favourite youtube channels switched to Blue sky 😊

[@radadadadee]

the liberal woke haven lol

[@languagelanguage3302]

Very nicely explained can you please tell me the what font you used for thumbnail (and lot more) part thanks 👍🏼

[@lakhveerchahal]

That’s really interesting!

[@marcod.643]

What a nice addition to CSS capabilities. Long awaited. 😅

[@pwall]

The restrain after saying "If you insist on using tailwind" 😭

[@AndreaDoimo]

Great tips! I'm now curious about your position about Tailwind

[@MattDunlapCO]

I imagine he feels like everyone else who actually knows css feels about Tailwind. Atomic css is just more work and nastier markup to achieve what you can do without a massive framework.

[@bn5055]

​@@MattDunlapCOhaha, "massive framework" 😂

[@MattDunlapCO]

@@bn5055 2.4mb isn't small but is massive compared to typical CSS payloads.

[@soymuymuy]

Kevin! Would putting this inside html {} cause any performance issues on the site? Is this "feature" costless?

[@pdizzlin]

If globally enabling interpolate size may as well throw it in a media query! @media (prefers-reduced-motion: no-preference) { :root { interpolate-size: allow-keywords; } }

[@bmehder]

I'd love to hear your spicy takes on Tailwind. Come on. You know the KZbin algorithm would reward you.

[@codeSurvivor]

Nice, thanks a lot! I was toying around with the buttons with the svg icons codepen and realized that if I change the inline-size from max-content to auto, the icon disappears when hovering the button, any idea why?

[@KevinPowell]

You can't use these to go between two intrinsic sizes. Would be cool, but currently not possible

[@codeSurvivor]

@@KevinPowell thanks for your answer. I'm not sure that's what's going on though, because in you codepen you are actually changing from max-content in the normal state, to auto (+ offset) in the focus/hover state. The only thing I'm changing from your original codepen is replacing 'max-content' for 'auto' on line 12 of the CSS file, and even though the button is getting to the desired width when hovering, the svg is not visible, even though it's there in the devTools inspector 🤔

[@codeSurvivor]

oh, yest now that I double check it, the svg is just more to the right of the button , so because of overflow: clip, is not visible.. I wonder why just that little change does that..

[@PascalHorn]

Got some new tools on my belt. Awesome. 🥳

[@Dorgrident]

Browser support: chrome and edge. this is not ready to use.

[@D7460N]

Why doesn’t an initial width of `width: min-content;` and then a hover and focus-visible width of `width: max-content;` work?

[@marble_wraith]

So is this a way we can do fluid typography while avoiding all the WCAG issues?

[@KevinPowell]

Don't see how we could use this with fluid type? Maybe I'm missing something though.

[@backup_hdd]

TIL: there's a css unit for line-height

[@deatho0ne587]

interpolate-size: What would it break if it was in the browsers? They animate when they did not? so what. It animates a bit different if they were using JS, it would still work.

[@simonhartley9158]

That sounds confusing especially if people using different browsers had different behavior and you didn't know why. If you wanted a works everywhere solution, you'd the need a new CSS property to disable the behavior instead.

[@deatho0ne587]

Not everything works the same in all browsers anyways. I am sorry if you have to support 6+ year old browsers, but if you do you most likely use poly fills or doing it yourself. Heck Kevin showed what it looks like if the browser did not support it, which is what most old sites look like still. Besides that the change in browsers would effect older sites. But it would not break their looks, accessibility or the like. It would just add a transition (which can be turned off by user). The only case were the transition might break something is in the case of a JS thing to do the same thing, but even that would not really break and end out at the full length that was originally intended. It would just act a bit different. Now if this was now all blue's will forever be pinkish. Yes, I would not want it in browsers, but that would break accessibility in old sites.

[@KevinPowell]

If it started animating via JS and CSS, it could lead to issues. There's a lot of jQuery use out there for this type of thing. It's easy to add one line of CSS to opt in 🤷

[@deatho0ne587]

I do understand it is a simple one liner to do it. I just do not see it breaking anything, now the way it acts yes but ultimately it should end out the same as it was. I remember writing a few of those jQuery hacks still on some major websites, I guess I just do not care if the looks change very slightly. Think my bigger concern is more for the future of the web, how many of these one-liners will be in every reset. Will it become over bloated/unmaintainable due to requiring legacy stuff from 100+ years ago. I know we generally do not think like that, but maybe we should.

[@simonhartley9158]

@@deatho0ne587 Both JS and CSS trying to animate would likely not result in a smooth animation. Also if any CSS animation was GPU accelerated, I assume that would also no longer be the case and so it would be choppy and slow. Also if the JS is not expecting the CSS to interfere, then it may overshoot or if coded poorly, fail to stop at all. Perhaps if the JS had a fixed size interval the animation would happen at double the expected speed. Lots of things could go wrong.

[@eduazy]

maybe in 10 years Safari and Firefox will support it lol

[@titoboyabunda4763]

not supported on firefox xD

[@LokiDaFerret]

Nope!! I can speak on behalf of all developers on the planet that NOBODY wrote CSS transitions and thought oh I can leave that transition to auto because you can't actually transition to auto. No. It just doesn't exist. It does however highlight some of the very poor decision-making on the CSS standards. And by the very fact that you, Kevin, are advocating defining it at the HTML level should be telling you something... Nobody's code is going to break because you told them to put interpolate keywords on HTML.

[@ziad_jkhan]

For some reason, he NEVER mentions it when it's ONLY Chromium compatible

[@KevinPowell]

I do mention how it's a progressive enhancement for unsupported browsers. These videos last forever and I can't edit them, so I try not to mention specific browsers supporting them when it'll be different 1 month from now. I did specifically mention it in the written article, since that can be updated as needed 🙂