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.
Web interfaces should start from the platform’s interaction contract rather than the visual surface. In this essay Karl Koch argues that using native elements preserves behaviour, accessibility, and durability: choose button over a styled div; use details/summary for disclosure; and let the browser and assistive tech like VoiceOver handle focus, keyboard interaction, forms and state. Recreating these behaviours with patched roles, tabindex, key handlers, and ARIA produces fragile, maintenance-heavy components. Native semantics survive redesigns because they describe what an interface is, not how it looks, and free designers to apply custom styling on top of robust primitives. Custom components deserve attention when the interaction is genuinely novel, but the default contract should be exhausted first to avoid regressions and lost functionality. This approach reduces bugs, improves keyboard and form behaviour, and scales better across products.