CSS Wrapped 2025 | New Features in Google Chrome

New CSS Features in Google Chrome (2025)

The Chrome Dev Team has published a comprehensive overview of the CSS features released in Google Chrome throughout 2025, showcasing advancements in component customization, interactions, and ergonomics. The “CSS Wrapped 2025” page details over a dozen new functionalities, eliminating the need for JavaScript in some cases.

Why This Matters

Modern web development strives for declarative solutions, reducing reliance on complex JavaScript for UI interactions and styling. However, achieving this ideal often requires browser support for new CSS features. The proliferation of these features in Chrome reduces fragmentation and allows developers to build more efficient and maintainable web applications, preventing the need for workarounds that can introduce bugs and performance bottlenecks.

Key Insights

• Interest Invoker API: Enables direct manipulation of dialog and popover elements within HTML.
• Scroll State Queries: Allow developers to create more dynamic and engaging user experiences based on scroll position.
• Custom CSS Functions: Developers can now define and reuse custom CSS functions, enhancing code modularity and reducing redundancy.

Working Example

/* Example of using the if() function */
.element {
  color: if(is-dark-mode(), black, white);
}

/* Example of using sibling-index() */
.item:nth-child(odd) {
  background-color: lightgray;
}

.item::before {
  content: "Item " sibling-index();
}

Practical Applications

• Interactive Components: The Interest Invoker API simplifies the creation of dynamic dialogs and popovers for improved user engagement.
• Pitfall: Overuse of complex shape() or corner-shape() functions can impact rendering performance, particularly on less powerful devices.

References:

• https://css-tricks.com/css-wrapped-2025/