Modern CSS has evolved significantly, allowing developers to create advanced user interface patterns like scrollspy entirely without JavaScript. Traditionally, tracking which section of a page is currently visible required complex event listeners and observer APIs. However, newly introduced CSS features such as the `scroll-target-group` property and the `:target-current`, `:target-before`, and `:target-after` pseudo-classes enable browsers to natively understand and manage scroll markers. By combining these capabilities with advanced layout techniques like anchor positioning, developers can build smooth, continuous, and responsive tables of contents that adapt gracefully as users scroll through a document. While browser support remains limited primarily to Chromium-based engines, this approach exemplifies a progressive enhancement strategy that enriches modern web experiences.
Traditionally, CSS developers use the `@supports` rule to detect browser support for properties, values, and selectors. However, checking for underlying implementation updates, behavior changes, or properties that suddenly work together has historically been impossible without hacky workarounds. To solve this problem, the CSS Working Group introduced `@supports named-feature()`, a specialized function designed to expose specific capabilities via predefined keywords. This feature addresses tricky edge cases where conventional feature detection fails, such as transform-aware anchor positioning and single-axis scroll containers. By utilizing specific keywords within the function, developers can accurately verify browser behaviors and ensure progressive enhancement across modern engines like Chromium, Firefox, and Safari, ultimately improving the reliability of web layouts.