scroll-target-group is a new CSS feature that lets you create scroll-spy table of contents with basically 2 lines of CSS.

Una provides insights into web accessibility, inclusive design, and user experience best practices. Developers can explore Una's  articles, guides, and resources to gain a deeper understanding of accessibility standards, design principles, and usability considerations. By embracing Una's teachings, developers can ensure that their digital products are accessible to all users, regardless of their abilities or impairments, and create more inclusive and user-friendly experiences for everyone.

Una Kravets

A new CSS property called scroll-target-group combined with the :target-current pseudo-class enables developers to create scroll-spy table of contents with just two lines of CSS. This feature, landing in Chrome 140, eliminates the need for JavaScript when building navigation that highlights the current section as users scroll. The implementation requires setting scroll-target-group: auto on the parent container and styling active links with :target-current. The feature works well with progressive enhancement, allowing developers to conditionally display the functionality only in supported browsers while maintaining basic anchor link navigation in others.

Creating a scroll-spy with 2 lines of CSS