{
  "id": 6228462,
  "title": "@supports named-feature() lets you branch on behavior, not syntax",
  "url": "https://urgent.news/2026/09/08/supports-named-feature-lets-you-branch-on-behavior-not-syntax",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-08T04:08:27.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/leobaniak/supports-named-feature-lets-you-branch-on-behavior-not-syntax-260k"
  },
  "original_language": "en",
  "account": "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.",
  "summary": "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…",
  "key_points": [
    "@supports named-feature() allows branching on browser behavior, not syntax.",
    "Two keywords discussed: anchor-position-follows-transforms and single-axis-scroll-container.",
    "@supports named-feature() resolves property support within the cascade, improving interop."
  ],
  "editors_take": "This development lets developers check if a browser supports specific behaviors, not just syntax, streamlining the process and reducing reliance on workarounds like user-agent sniffing or JavaScript-based checks.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}