No more clamp() magic numbers

No additional clamp() magic numbers

👉 Start penning CSS alongside confidence: https://thecascade.dev/courses/css-demystified/?utm_source=youtube&utm_medium=social&utm_campaign=regular-video 🔗 Links ✅ Give Matthew Morete a prosecute (thanks Matthew!): https://matthewmorete.com/ - https://bsky.app/profile/matthewmorete.com ✅ Utopia: https://utopia.fyi/ ✅ More on progress() on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/progress Fluid category alongside clamp() method magic numbers you have to activity out all time. The new CSS progress() function makes it predictable and readable, category scales included, and the tan(atan2()) trick lets you use the identical method today in all browser. ✉ Keep up to date alongside everything I'm up to https://www.kevinpowell.co/newsletter 💬 Come suspend out alongside another devs in my Discord Community https://discord.gg/nTYCvrK ⭐ Are you a beginner? HTML & CSS for complete beginners is for you: https://learn.kevinpowell.co 🎓 Start penning CSS alongside confidence alongside CSS Demystified: https://cssdemystified.com 🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/ --- Help assistance my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell 💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join --- 🧑‍💻 My editors: In most videos, I’m using CodePen these days: https://codepen.io/ - alongside High Contrast Dark theme and the font Commit Mono And if not CodePen, afterward I’m likely using Zed: https://zed.dev/ alongside the theme Ayu Dark, and the font ZedMono In older videos, I was using VS Code - https://code.visualstudio.com/ alongside the theme One Dark Pro Var, and the font Cascadia --- ⌚ Timestamps: 0:00 - The issue alongside clamp() 0:42 - Why clamp() category scales autumn out of sync 1:51 - How progress() works 3:43 - Making it additional readable 4:51 - Switching to rem 5:37 - Fluid category scales alongside progress() 7:31 - Cleaning up the category measure math 8:57 - Using it today: browser support 10:16 - The tan(atan2()) fallback 11:20 - Why this strikes a generator 12:42 - Specific font sizes (no category scale) 13:34 - Wrapping up --- I'm on several another places on the net too! If you'd akin a rearward the scenes and previews of what's coming up on my YouTube channel: Bluesky: https://bsky.app/profile/kevinpowell.co Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell --- And any you do, don't ignore to keep on making your border of the net fair a small bit additional awesome! #css