Top UI & Design Updates from Google I/O 2025

Key Concepts

Cascade Layers, CSS Nesting, Light/Dark Mode, Scroll-Driven Animations, Scroll State Queries (stuck, snapped, scrollable), View Transitions API, Popover API, Anchor Positioning, Interest Target, Declarative Popover Actions, Baseline Widely Available.

Scroll Features and Scroll State Queries

The speaker highlights the advancements in scroll features, particularly scroll-driven animations, which enhance the interactivity of carousels. A key development is the introduction of scroll state queries, a new type of media query that allows applying styles based on the state of a parent element's scroll container.

• Three types of scroll state queries:
  • stuck: Applies styles to sticky elements when they are in a stuck state.
  • snapped: Applies styles when an element is snapped within a scroller.
  • scrollable: Indicates whether a scroll container has overflow, allowing styles to be applied based on the presence of scrollable content.

View Transitions API

The View Transitions API, pioneered by Google and standardized at the CSS Working Group, enables smooth transitions between different states of a website.

• Functionality: Allows for seamless transitions between UI states, ranging from minor element swaps to complete layout changes.
• Triggering: Transitions can be triggered via JavaScript using document.startViewTransition or by navigating between pages after opting in using CSS.
• Benefit: Enables view transitions simply by clicking a link.

Popover and Anchor Positioning APIs

The speaker emphasizes the importance of Popover API and Anchor Positioning as fundamental building blocks for UI components, particularly customizable selects.

• Popover API: Facilitates the creation of floating UI elements (like dropdowns) that are easily dismissable, manage focus effectively, and are positioned above other UI elements.
• Anchor Positioning: Enables precise positioning of popovers relative to other elements.
• Application: Customizable selects leverage the Popover API for their functionality.
• Example: Teimu, an e-commerce company, has successfully integrated these APIs, including the multi-page application view transitions API, resulting in significant gains.

Teimu Case Study

Teimu's implementation of new UI primitives, including the multi-page application view transitions API, has yielded positive results.

• Results:
  • User session duration increased by 10%.
  • User page views increased by 15%.
  • Internal testing of carousels, popover, anchor positioning, and custom select showed improved page performance.
  • CPU load reduced by 10-15%.

Interest Target

Interest Target is an early-stage origin trial feature that enhances declarative popover actions.

• Functionality: Triggers popover actions based on user interest, such as hover (for pointer devices), tab navigation (with keyboard), or long press (on touch screens), rather than solely relying on clicks.
• Availability: Can be tested by enabling experimental web platform features in Chrome Canary.
• Benefit: Provides more intuitive and context-aware UI interactions.

Platform Evolution and Feature Availability

The speaker highlights the accelerated pace at which new features are becoming available across different browsers.

• Trend: Features are transitioning from a single browser to being available in all major browsers much faster than before.
• Example: Cascade Layers launched in Firefox in February 2022 and became baseline widely available (supported by Chrome and Safari) in just over a month.
• Impact: This rapid adoption empowers developers to build complex UI patterns more efficiently, accessibly, and performantly using declarative CSS and HTML.

Conclusion

The web platform is evolving rapidly, with new UI features like scroll state queries, view transitions, popover API, anchor positioning, and interest target empowering developers to create more stylish, responsive, and accessible user interfaces. The faster adoption rate of these features across browsers allows for more efficient development workflows, better performance, and increased focus on innovation. The shift towards declarative CSS and HTML promotes cleaner code, improved accessibility, and enhanced performance.