@supports named-feature() lets you branch on behavior, not syntax
The test you can't write today Say you want to branch a stylesheet on how an engine resolves anchor positioning around CSS transforms. Both browsers parse position-anchor . Both accept anchor() . The declarations look identical to @supports . What differs is behavior, and behavior is invisible to a parser check. Bramus opens on exactly this bind: @supports has only ever asked whether a string can…
CSS now offers a new method called @supports named-feature(), enabling developers to branch stylesheet logic based on browser behavior rather than syntax. This feature provides a cleaner way to check for specific engine capabilities, rather than just the presence of properties, values, selectors, or at-rules. The named-feature() shape introduces a keyword to determine if an engine recognizes a particular behavior.
Currently, two keywords are discussed: anchor-position-follows-transforms and single-axis-scroll-container. These keywords will be added to the CSS specification only when a behavior is deemed significant enough to warrant a name. The alternative to using this feature would be user-agent sniffing or JavaScript-based checks, which would require additional code and maintenance outside of the stylesheet.
By utilizing @supports named-feature(), the answer to the question of whether a behavior is supported is placed within the cascade, at the parsing stage, alongside the property it protects. This approach addresses the long-standing issue of not having a way to inline the second aspect of interop stories: does the property work as specified?
As more interop fixes and new combinations of existing features emerge, they will become potential candidates for creating new keywords in the future.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
