{"id":6948,"date":"2025-09-19T18:05:13","date_gmt":"2025-09-19T23:05:13","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=6948"},"modified":"2025-11-08T13:43:37","modified_gmt":"2025-11-08T18:43:37","slug":"what-you-need-to-know-about-modern-css-2025-edition","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/what-you-need-to-know-about-modern-css-2025-edition\/","title":{"rendered":"What You Need to Know about Modern CSS (2025 Edition)"},"content":{"rendered":"\n

We published an edition of What You Need To Know about Modern CSS last year (2024)<\/a>, and for a while I really wasn’t sure if only a year later we’d have enough stuff to warrant and new yearly version. But time, and CSS, have rolled forward, and guess what? There is more<\/em> this year than there was last. At least in this somewhat arbitrary list of “things Chris thinks are valuable to know that are either pretty fresh or have enjoyed a boost in browser support.”<\/em><\/p>\n\n\n\n

\n

Animate to Auto<\/h2>\n\n\n\n

What is this?<\/h3>\n\n\n\n

We don’t often set the height<\/code> of elements that contain arbitrary content. We usually let elements like that be as tall as they need to be for the content. The trouble with that is we haven’t been able to animate from a fixed number (like zero) to whatever that intrinsic height is (or vice versa). In other words, animate to auto<\/code> (or other sizing keywords like min-content<\/code> and the like). <\/p>\n\n\n\n

Now, we can opt-in to being able to animate to these keywords, like:<\/p>\n\n\n

html<\/span> {\n  interpolate-size<\/span>: allow-keywords;\n  \/* Now if we transition \n     \"height: 0;\" to \"height: auto;\" \n     anywhere, it will work *\/<\/span>\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
If we don’t want to use an opt-in like that, alternatively, we can use the calc-size()<\/code> function to make the transition work without needing interpolate-size<\/code>.<\/p>\n\n\n
.content<\/span> {\n  height<\/span>: 3<\/span>lh;\n  overflow<\/span>: hidden;\n  transition<\/span>: height 0.2s<\/span>;\n  \n  &.expanded {\n    height<\/span>: calc-size<\/span>(auto, size);\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Why should I care?<\/h3>\n\n\n\n
This is the first time we’ve ever been able to do this in CSS. It’s a relatively common need and it’s wonderful to be able to do it so naturally, without breaking behavior. <\/p>\n\n\n\n
And it’s not just height<\/code> (it could be any property that takes a size) and it’s not just auto<\/code> (it could be any sizing keyword).<\/p>\n\n\n\n
Support<\/h3>\n\n\n\n
Browser Support<\/td>Just Chrome.<\/td><\/tr>
Progressive Enhancement<\/td>Yes! Typically, this kind of animation isn’t a hard requirement, just a nice-to-have.<\/td><\/tr>
Polyfill<\/td>Not really. The old fallbacks including things like animating max-height<\/code> to a beyond-what-is-needed value, or using JavaScript to attempt to measure the size off-screen and then doing the real animation to that number. Both suck.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Usage Example<\/h3>\n\n\n\n