CSS Wrapped 2025: Is JavaScript starting to tremble?

If you still think of CSS as that frustrating language where centering a div is a struggle, you’re stuck in 2020. The CSS Wrapped 2025 released by the Chrome team is more than a changelog: it’s a manifesto.

The message is clear: we’re entering an era where logic, state, and complex interactions (which previously required heavy JavaScript libraries) become native. Here are the 4 features that will make us delete thousands of lines of unnecessary JS code.

1. Finally, a customizable <select>

It’s been a pain point for every frontend dev for decades. The client wanted a beautiful dropdown, and you had to import a 50kb JS library or cobble together inaccessible divs. The problem is solved. With appearance: base-select, we can fully style the native <select> tag (including individual options and the dropdown menu) using standard CSS. The result? Guaranteed accessibility and zero dependencies.

2. The death of the JS carousel

Clients and designers love sliders. Developers hate them because they require heavy scripts to work well. With the new pseudo-elements ::scroll-marker and ::scroll-button(), we can create carousels with navigation dots and arrows without writing a single line of JavaScript. The markers automatically connect to the scroll container. Pure performance.

3. “If this, then that”... in CSS

Yes, you read that right. Inline if() statements are coming. They work like ternary operators directly in the stylesheet, letting you apply different values based on media queries or support queries without having to rewrite huge blocks of code. Add functions like sibling-index() (to calculate an element’s index), and you can create staggered animations (staggered animations) by calculating the delay mathematically in CSS, without cluttering the HTML with custom variables.

4. Scroll State Queries: Know if they’re “Sticky”?

Until yesterday, finding out whether a position: sticky element had actually “stuck” to the edge required IntersectionObserver in JS. A hack. Now, with container-type: scroll-state, we can query the scroll state declaratively. Want a shadow on the header only when it sticks to the top? You can do it in CSS.

Graffico’s take 🔴

Why does this change our work as a Tech Partner? Because “less JavaScript” means “more stability.” Moving interface logic to the browser’s native engine (CSS) makes applications lighter, faster, and less prone to bugs. Stop fighting the browser. Start using it.