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.
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.