Una Kravets recently presented in a talk recent developments in Web UI supported by the Chrome team. Some common UI patterns that currently require a significant amount of JavaScript may soon be implemented in a declarative manner with new features of HTML and CSS, with less custom JavaScript, and with built-in accessibility.

The talk focuses on three particularly tricky UI patterns: customizable select menus, carousels, and hover cards. All three UI patterns are commonly found in design systems, with many lines of JavaScript to implement custom styling, presentation, layout, interaction, or accessibility patterns. With browser vendors evolving web standards to incorporate those patterns away from userland into the browsers themselves, developers may have less work to do in the future and simply rely on the platform. Less custom JavaScript also benefits users in the shape of increased performance. The proposed declarative APIs have already shipped in at least one stable browser engine.

Customizable Select Menu

The first pattern discussed is the customizable select menu. The native element’s internal structure has been historically difficult to style consistently across browsers:

A common frustration for developers who try to work with the browser’s built-in form controls is that they cannot customize the appearance of these controls to fit their site’s design or user experience. In a survey of web developers about form controls and components, the top reason that devs rewrite their own versions of these controls is the inability to sufficiently customize the appearance of the native controls.

The building blocks for a customizable select are the Popover API and Anchor Positioning.

• The Popover API handles the floating list of options, ensuring it appears above other UI elements, is easy to dismiss, and manages focus. Popover has reached baseline status and is now available in all browsers.
• Command invokers provide a declarative HTML solution similar to popovertarget for connecting button clicks to actions, reducing the need for boilerplate JavaScript.
• Anchor Positioning is a CSS API that lets developers position elements relative to other elements, known as anchors. This API simplifies complex layout requirements for many interface features like menus and submenus, tooltips, selects, labels, cards, settings dialogs, and many more.

Anchor Positioning is part of Interop 2025, meaning that it should land in all browsers by the end of the year.

The improved select element anatomy showcases two parts, a button, and a popover anchored to that button, all with corresponding selectors for targeting and styling:

Styles can be applied to the popover through the selector ::picker(select). An example of custom styling is as follows:

select, ::picker (select) { appearance : base-select ; }
::select-fallback-button { background : gold ; font-family : fantasy ; font-size : 1.2 rem ; }
::picker (select) { border-radius : 1 rem ; }
option { font-family : monospace ; padding : 0.5 rem 1 rem 0.5 rem 0 ; font-size : 1.2 rem ; }
option :checked { background : powderblue ; }
option :hover , option :focus-visible { background-color : pink ; }
option ::before { content : '' ; font-size : 80% ; margin : 0.5 rem ; }
body { padding : 2 rem ; }

Developers are encouraged to review the full talk for additional technical details, demos, and explanations. The talk additionally explains how recent features from the CSS Overflow 5 specification, namely scroll buttons and scroll markers, enable scroll-driven animations purely in CSS.

Source: infoq.com