State, Logic, And Native Power: CSS Wrapped 2025

State, Logic, And Native Power: CSS Wrapped 2025 If I were to divide CSS evolutions into categories, we have moved far beyond the days when we simply asked for Smashing NewsletterTips on front-end & UX, delivered weekly in your inbox. Just the things you can actually use. Front-End & UX Workshops, OnlineWith practical takeaways, live sessions, video recordings and a friendly Q&A. TypeScript in 50 LessonsEverything TypeScript, with code walkthroughs and examples. And other printed books. border-radius to feel like we were living in the future. We are currently living in a moment where the platform is handing us tools that don’t just tweak the visual layer, but fundamentally redefine how we architect interfaces. I thought the number of features announced in 2024 couldn’t be topped. I’ve never been so happily wrong. The Chrome team’s “ CSS Wrapped 2025 ” is not just a list of features; it is a manifesto for a dynamic, native web. As someone who has spent a couple of years documenting these evolutions - from defining “CSS5” eras to the intricacies of modern layout utilities - I find myself looking at this year’s wrap-up with a huge sense of excitement. We are seeing a shift towards “Optimized Ergonomics” and “Next-gen interactions” that allow us to stop fighting the code and start sculpting interfaces in their natural state. In this article, you can find a comprehensive look at the standout features from Chrome’s report , viewed through the lens of my recent experiments and hopes for the future of the platform. The Component Revolution: Finally, A Native Customizable Select For years, we have relied on heavy JavaScript libraries to style dropdowns, a “decades-old problem” that the platform has finally solved. As I detailed in my deep dive into the history of the customizable select (and related articles), this has been a long road involving Open UI , bikeshedding names like <selectmenu> and <selectlist> , and finally landing on a solution that re-uses the existing <select> element. The introduction of appearance: base-select is a strong foundation. It allows us to fully customize the <select> element - including the button and the dropdown list (via ::picker(select) ) - using standard CSS. Crucially, this is built with progressive enhancement in mind. By wrapping our styles in a feature query, we ensure a seamless experience across all browsers. We can opt in to this new behavior without breaking older browsers: select { /* Opt-in for the new customizable select */ @supports (appearance: base-select) { &, &::picker(select) { appearance: base-select; } } } The fantastic addition to allow rich content inside options, such as images or flags, is a lot of fun. We can create all sorts of selects nowadays: Demo: I created a Poké-adventure demo showing how the new <selectedcontent> element can clone rich content (like a Pokéball icon) from an option directly into the button. See the Pen [A customizable select with images inside of the options and the selectedcontent [forked]](https://codepen.io/smashingmag/pen/JoXwwoZ) by utilitybend . A customizable select with images...

Preview: ~500 words