@supports named-feature() で「挙動の変化」を検出する
プロパティ単体のパース可否では測れない実装差分（transform 追従のアンカー配置など）を、@supports named-feature(キーワード) で検出する。
どんな時に使う？
既存プロパティの組み合わせや、仕様更新で「挙動だけ」が変わった機能を CSS だけで分岐したいとき。@supports (gap: 1em) のようにパース可否だけ見ると、Flex で gap が効くか／アンカーが transform を追うか、といった差分が分からない。
コード／手順
キーワードは仕様で定義されたものだけ使える。現状の主な例:
css
/* アンカー配置が transform を追従するか */
@supports named-feature(anchor-position-follows-transforms) {
/* transform 付きアンカー向けの位置調整など */
}
/* 単一軸だけのスクロールコンテナ（軸別 sticky が素直に動く） */
@supports named-feature(single-axis-scroll-container) {
/* 軸ごとの sticky / overflow 設計 */
}- 従来の
@supports (display: flex) and (gap: 1em)は「両方パースできるか」しか見ない。組み合わせの実効性は見ない。 named-feature()は、検出が難しく需要の高い挙動だけにキーワードが増える設計（なんでも追加されるわけではない）。- 他の at-rule 自体の有無は
@supports at-rule(--foo)/at-rule()側を使う。
注意点・対応状況
named-feature()本体: Chrome 150+、Firefox 156（まもなく beta）、Safari Technology Preview（2026-08 時点の記事情報）。anchor-position-follows-transforms: Chrome 150+ など。機能本体が先に入り、検出キーワードが後追いの期間がある（Chrome 144–150 などで false negative になりうる）。single-axis-scroll-container: Chrome 153+。Firefox / Safari は未対応の記載あり（記事時点）。- 古い「Flexbox gap」など、すでに全域サポートの機能にはキーワードは付かない。