Web Stage - Day 2 (Google I/O 2025)

What's New in Web UI - Summary

Key Concepts:

• Web UI Golden Age: Rapid advancements in native HTML and CSS capabilities.
• Popover API: Simplifies creating floating UI elements with built-in lifecycle management.
• Anchor Positioning: CSS API for declaratively tethering elements, handling edge collisions.
• Command Invokers: Declarative HTML solution for linking elements and actions, reducing JavaScript.
• Customizable Select: Native styling for select elements using appearance property and new pseudo-elements.
• CSS Carousels: Building carousels with native CSS features like scroll snap, scroll buttons, and scroll markers.
• Scroll State Queries: Media queries based on the scroll state of a parent element (stuck, snapped, scrollable).
• Scroll-Driven Animations: Animating elements based on scroll position for performant, interactive UIs.
• Interesttarget: Experimental feature for invoking popovers based on user interest (hover, tab, long press).
• Popover Hint: New popover type that doesn't close other popovers when opened, useful with interesttarget.

1. Customizable Select, Popover, and Anchor Positioning

• The Problem: Customizing the native <select> element has been historically difficult due to browser shielding and inconsistent styling.
• Popover API:
  • Simplifies creating dropdown lists (floating boxes of options).
  • Reached Baseline status (available in all browsers).
  • Requires a trigger element (button) and the popover element itself.
  • The popover element needs an id and the popover attribute.
  • The trigger button uses popovertarget to connect to the popover's id.
  • Manages top-layer rendering, light dismiss functionality (closing on outside click), and focus management.
  • While popover is useful, modal dialogues require the dialog element for interactions that block the page.
• Close By Attribute:
  • The closeby="any" attribute, available in Chrome 134, enables light dismiss on modal dialogues.
  • Clicking outside the dialogue or pressing the escape key closes it.
• Command Invokers:
  • Provide a declarative HTML solution for connecting button clicks to actions (like opening a dialogue).
  • Uses the command and commandfor attributes.
  • Example: <button command="showModal" commandfor="dialog-id">Open</button>.
  • Can also be used to close dialogues with command="close".
  • A polyfill is available for non-supporting browsers.
• Anchor Positioning:
  • CSS API for declaratively tethering one element to another, handling edge collisions automatically.
  • Part of Interop 2025, expected to land in all browsers by the end of the year.
  • Chrome 133 introduces an implicit anchor relationship between popover elements and their invoking buttons.
  • Uses position-area property for positioning (e.g., position-area: bottom span left).
  • Tool available at Chrome.dev/anchortool for visualizing anchor positioning.
  • Supports fallback positions (e.g., flip-block, flip-inline) to prevent popovers from being cut off.
• Customizable Select Implementation:
  • Achieved by setting appearance: base-select on the <select> element and the ::picker pseudo-element.
  • Unlocks new features and behaviors, including exposing internal parts and states of the select.
  • Provides access to styling the dropdown button, options, checked option, and a checkmark pseudo-element.
  • Allows inserting selected content and customizing the checkmark.
  • Progressive enhancement: In non-supporting browsers, the native select element is still rendered.
  • Chrome 137 will include DevTools warnings for accessibility violations in customizable selects.

2. Carousels and Off-Screen UI

• The Problem: Building carousels is complex, involving scripting for state management, scroll jank, and accessibility.
• CSS Scrollbar Styling:
  • scrollbar-width: none removes the scrollbar while maintaining scrollability.
• Scroll Snap:
  • scroll-snap-type and scroll-snap-align enable item-by-item snapping to the center of the carousel.
• Scroll Buttons:
  • ::scroll-button pseudo-element generates connected, styled button elements for navigating the scroll container.
  • The browser automatically provides the correct ARIA role, tab order, and disabled state.
  • Buttons can be styled using ::scroll-button right, ::scroll-button left, etc.
  • Content can be added to the buttons using the / syntax (e.g., content: 'Previous' / 'Next').
  • Anchor positioning can be used to position the buttons within the carousel.
  • scroll-snap-stop can be used to shift the carousel one item at a time.
• Scroll Markers:
  • ::scroll-marker lets you associate navigation markers directly with items inside the scroll container.
  • Markers are initialized with the content property and should have accessible labels.
  • The attr() function can be used to dynamically read data attributes for labels.
  • The attr() function in Chrome 133 was upgraded to cast values to colors, numbers, percentages, etc.
  • Scroll markers are placed in the scroll-marker-group.
  • The browser treats the group like a tab list and markers like links, handling keyboard navigation.
  • The :target-current pseudo-class styles the active scroll marker.
• Scroll State Queries:
  • Media queries that apply styles based on a parent element's scroll state.
  • Types: stuck (for sticky elements), snapped (in a scroller), and scrollable (if there is overflow).
  • Example: Styling a header when its parent section becomes sticky using @container scroll-state: stuck top.
  • Example: Applying a linear gradient to indicate scrollability.
  • Example: Animating a scroll-to-top button when the content is no longer scrollable.
  • Example: Styling the snapped element in a carousel to give it more focus.
• Scroll-Driven Animations:
  • Animate elements based on scroll position for interactive UIs.
  • Companies like web.dev studios are using scroll-driven animations.
  • A polyfill is available for non-supporting browsers.
  • Bramus Van Damme has a gallery of animation patterns and a free video series on YouTube.
• Accessibility:
  • The Chrome team is working on an interactivity property to support blur and focus management in carousels.
  • interactivity: inert is equivalent to dynamically applying the inert attribute.

3. Hovercards and Interest-Based Interactions

• The Problem: Building Hovercards is complex, involving managing multiple interest-based events, states, and modalities.
• Interesttarget:
  • An early-stage origin trial feature for invoking popovers based on user interest (hover, tab navigation, long press).
  • Replaces popovertarget with interesttarget.
  • Supports event delays using the interesttarget-delay property.
  • The :has-interest pseudo-class styles an element on any interest interaction.
• Popover Hint:
  • A new popover type (popover="hint") that doesn't close other popovers when opened.
  • Useful for tooltips, profile cards, and action bars.
  • Works well with interesttarget because it allows triggering a popover without a click event.

4. Synthesis/Conclusion

The presentation highlights significant advancements in Web UI development, focusing on simplifying complex UI patterns through native browser features. The Popover API, Anchor Positioning, and Command Invokers provide declarative solutions for common UI interactions, reducing the need for custom JavaScript. CSS Carousels, Scroll State Queries, and Scroll-Driven Animations enable performant and accessible carousel implementations. Finally, Interesttarget and Popover Hint offer a streamlined approach to building Hovercards and other interest-based interactions. These features empower developers to build more efficient, accessible, and maintainable web applications.