Uploaded September 2024 | Updated September 2026, 2 hours ago

---

Find out how to enable new CSS transitions behavior that allows you to transition to intrinsic sizing keywords like "height: auto;" and how calc-size() implementation changed.

🔗 Links
Primer on calc-size() function: youtu.be/1VsMKz4Zweg
Demo: codepen.io/ZoranJambor/pen/JjQQEmo?layout=left
GitHub Issue: github.com/w3c/csswg-drafts/issues/10478

Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com

Help support my channel
👨‍🎓 Get a course: masteringlinting.com
🪧 Buy a CSS sticker pack: stickers.css-weekly.com
💖 Support me on Patreon: patreon.com/cssweekly

📖 Chapters
00:00 What calc-size() function does
00:28 Update on single-argument form for calc-size()
01:22 How two-argument form of calc-size() works
02:11 Why one-argument for of calc-size() no longer works
02:51 How interpolate-size property works
03:42 How to enable new CSS Transitions behavior on the entire page
04:20 When to use calc-size() and when interpolate-size
04:41 Browser support for calc-size() and interpolate-size

Keep up-to-date with CSS Weekly:
🐦 Twitter: twitter.com/@cssweekly
🎶 TikTok: tiktok.com/@cssweekly
🎇 Instagram: instagram.com/cssweekly
📘 Facebook: facebook.com/CSSWeekly

Keep up to date with what I'm up to:
👨‍💼 Blog: zoranjambor.com
💼 LinkedIn: linkedin.com/in/zoranjambor

- Zoran Jambor
#css #csstricks