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.