@container anchored() で、アンカー配置のフォールバック側に切り替わったときだけ中身のスタイルを変える

どんな時に使う？

ツールチップやポップオーバーを position-try-fallbacks で画面内に収めるとき、位置はブラウザが反転してくれるが、中の矢印・影・拡大の原点はそのままでは追従しない。どのフォールバックが適用されたかを CSS だけで読み取り、中身のレイアウトや疑似要素を合わせたいときに使う。

コード

.trigger {
  anchor-name: --btn;
}

.popover {
  position: absolute;
  position-anchor: --btn;
  position-area: bottom;
  position-try-fallbacks: flip-block, --top-left;
  container-type: anchored; /* アンカー位置クエリのコンテナーにする */
}

/* 既定（下側）: 矢印は上向き */
.popover::before {
  content: "▲";
}

/* flip-block が効いたとき: 上に反転したので矢印も逆に */
@container anchored(fallback: flip-block) {
  .popover::before {
    content: "▼";
  }
}

/* 名前付き @position-try が効いたとき: 中身のグリッド原点を合わせる */
@container anchored(fallback: --top-left) {
  .popover-content {
    place-self: end;
  }
}

• クエリが当たるのはコンテナーの子孫だけ（コンテナー自身には効かない）。矢印や中身は内側の要素／疑似要素に置く。
• fallback: の値は実際に適用された position-try-fallbacks の1項目と一致させる。順番や flip-inline の有無も揃える必要がある。
• jhey の作例では、ポップオーバー本体のサイズは固定のまま、中のグリッド原点をフォールバック側に合わせて「トリガー側の角から中身が広がる」見た目にしている。

注意点・対応状況

• Chrome / Edge 143+（2025-12）。Firefox・Safari は 2026-11 時点で未対応。未対応ブラウザではクエリが無視され、既定スタイルのままになる。
• 前提として Popover API ＋ Anchor Positioning ＋ position-try-fallbacks で JS なしドロップダウン の配置ができていること。この記事はその「いまどっち向きか」を読む拡張。
• container-type: anchored はアンカー配置された要素に付ける。通常のサイズコンテナ（inline-size など）とは別の用途。

出典

• @jh3yy（2026-11-05、morphing popover）
• 補足デモ: @jh3yy（2026-11-06）
• 参考: MDN Using anchored container queries、Chrome Developers