What's new in web UI

Key Concepts

• Popover API: A declarative API for creating floating UI elements that manage their lifecycle, including top-layer rendering, light dismiss, and focus management.
• Anchor Positioning: A CSS API for declaratively tethering one element to another, handling edge collision automatically.
• Command Invokers: A declarative HTML solution for connecting button clicks to actions, like opening or closing a dialog, without JavaScript.
• Customizable Select: Native styling for Select elements, allowing for greater control over their appearance while preserving accessibility and functionality.
• Scroll Buttons: CSS pseudo-elements that generate stateful button elements for navigating scroll containers, including disabled states.
• Scroll Markers: CSS pseudo-elements that associate navigation markers directly with items inside a scroll container.
• Scroll State Queries: Media queries that allow applying styles based on a parent element's scroll state (stuck, snapped, scrollable).
• Scroll Driven Animations: Browser native animations synced with scroll, providing performant and smooth animations.
• InterestTarget: An early-stage origin trial feature that allows popovers to be invoked based on user interest, such as hover, tab navigation, or long press.
• Popover Hint: A popover type that doesn't close other popovers when opened, useful for tooltips and other layered UIs.

Select Element Customization

The Problem with Select Elements

• Historically, the internal structure of the <select> element has been obfuscated, making consistent CSS styling across browsers difficult.
• Developers often resort to hiding the real <select> and building a complete replacement using <div>s and lists, requiring significant JavaScript for functionality and accessibility.

Popover and Anchor Positioning as Building Blocks

• Popover API: Used for the dropdown list of options, providing top-layer rendering, light dismiss, and focus management.
  • Creating a popover involves a trigger element (e.g., a button) and the popover itself.
  • The popover is connected to the trigger using popovertarget.
  • The closedby="any" attribute enables light dismiss on modal dialogs.
  • Command invokers (command and commandfor) provide a cleaner way to link elements and actions in HTML, removing boilerplate JavaScript.
• Anchor Positioning: Used to correctly position the popover listbox relative to the button that opened it.
  • The browser creates an implicit anchor relationship between popover elements and their invoking buttons.
  • position-area is used to position the popover relative to the anchor.
  • Fallback positions can be specified to ensure the popover stays on the screen.

Native Styling for Select Elements

• Native styling for Select elements is now available in Chromium 134.
• Entering customizable select mode is done using the appearance property set to base-select on the <select> element and the picker pseudo-element.
• New features include:
  • appearance: base-select
  • picker pseudo-element (targets the popover containing the options)
  • Access to internal parts and states of the Select (dropdown button, options, checked option, checkmark)
  • selected-content element for displaying the selected option.
• Progressive enhancement: In non-supported browsers, the native <select> element with its default functionality is still available.
• Accessibility: Preserves the native Select element's built-in accessibility, keyboard navigation, and form integration.
• DevTools warnings will be displayed in Chrome 137 if Accessibility Guidelines are violated.

Example: Google AI Studio's Picker Menu

• A button inserts selected-content.
• Each option has a slot for an icon, title, and subtitle.
• The selected-content only shows the name of the Gemini version, hiding the subtitle and icon.
• A custom background image is used for the checkmark.

Carousels and Off-Screen User Interfaces

The Challenge of Building Carousels

• Carousels are useful for fitting related content into tight spaces but are difficult to build due to scripting for state management, scroll jank, interactivity, and accessibility.

Building a Carousel with CSS

• Horizontal Scroll: Create content that flows off-screen.
• Scrollbar Removal: Use scrollbar-width: none to remove the horizontal scroll bar.
• Scroll Snapping: Use scroll-snap-type and scroll-snap-align to enable item-by-item snapping.
• Anchor Name: Set an anchor name on the carousel for positioning buttons.

Scroll Buttons for Navigation

• The scroll-button pseudo-element generates stateful button elements for navigating the scroll container.
• The browser automatically provides the correct ARIA role, tab order, and disabled states.
• Buttons can be positioned using CSS anchor positioning.
• scroll-snap-type and scroll-snap-stop can be used to control the amount of content shifted when the buttons are clicked.

Scroll Markers for Direct Navigation

• scroll-marker lets you associate navigation markers directly with the items inside the scroll container.
• Markers are initiated with the content property and should have accessible labels.
• The attr() function can be used to dynamically read data attributes and use them as labels.
• The scroll-marker-group is treated like a tab list, and the markers like links.
• The target-current pseudo-class can be used to style the active marker.

Scroll State Queries for Enhanced Interactivity

• Scroll state queries allow applying styles based on a parent element's scroll state.
• Types:
  • stuck: Used for sticky positioned elements.
  • scrollable: Indicates if there is overflow.
  • snapped: Used for snapped elements in a scroller.
• Examples:
  • Making a header darker when its parent section becomes sticky.
  • Adding a linear gradient to indicate scrollability.
  • Making the snapped element larger in a carousel.

Scroll Driven Animations for Dynamic Flair

• Scroll driven animations allow for performant and smooth animations synced with scroll.
• Web Studio uses scroll driven animations at the core of their business model.
• Scroll driven animations can be used to size up each item as it flows through a carousel.

Accessibility Considerations

• The Chrome team is working on an interactivity property to help properly support blur and focus management.
• interactivity: inert is equivalent to dynamically applying the inert attribute to any card that is not currently snapped.

Performance Benefits

• Google Search estimated the potential to save 60% to 75% of their carousel script by using native CSS carousels.
• Elementor was able to remove 165kb of JavaScript and dramatically reduce their page size.

Hover Cards

The Challenge of Building Hover Cards

• Building hover cards involves managing multiple interest-based events and states, event delays, and various modalities (pointer devices, keyboard navigation, touch screen interactions).

InterestTarget for Declarative Popover Actions

• interesttarget is an early-stage origin trial feature that allows popovers to be invoked based on user interest (hover, tab navigation, long press).
• To change a popover to be invoked via interest, change popovertarget to interesttarget.
• Benefits include top-layer support and semantically connecting invoking elements to their interest targets.
• Event delays can be set using CSS to give users more time to interact.

Has-Interest Pseudo Class

• The has-interest pseudo-class lets you style an element on any interest interaction.

Popover Hint for Layered UIs

• popover="hint" is a popover type that doesn't close other popovers when opened.
• Useful for tooltips, profile cards, action bars, and preview cards for links.
• interesttarget and popover="hint" go together well because interesttarget allows triggering a popover without a click event.

CBS News Example

• CBS News built out author bio cards using the interesttarget API.
• Native browser functionality meant less overhead and a smoother implementation overall.
• The built-in pseudo-class styling for styling when the popover is open allowed them to handle visual states cleanly without extra JavaScript.

Conclusion

The Chrome team is focusing on making common UI patterns easier to implement with declarative APIs. Features like the Popover API, Anchor Positioning, Customizable Selects, Scroll Buttons, Scroll Markers, Scroll State Queries, Scroll Driven Animations, InterestTarget, and Popover Hint empower developers to build complex UI patterns in a more accessible, performant, and efficient way. These features reduce code cruft, improve performance, provide built-in accessibility, and free up developers to focus on innovation.