position-try-fallbacks でオーバーフローを回復する

問題

ビューポート上端のボタンに固定されたツールチップは、上に開こうとします。しかし上にスペースがない — ツールチップがビューポート上端からはみ出します。フォールバックがないと、ツールチップはクリップされて読めなくなります。

position-try-fallbacks はそのネイティブCSSソリューションです。

組み込みキーワード

.tooltip {
  position: absolute;
  position-anchor: --x;
  position-area: top;
  position-try-fallbacks: flip-block;
}

ターゲットがはみ出すとブラウザが検出した場合：

1. flip-block — ブロック軸（horizontal-LTRでは垂直）の反対側を試す。top → bottom、bottom-end → top-end。
2. flip-inline — インライン軸（水平）の反対側を試す。left → right、top-start → top-end。
3. flip-block flip-inline — 両軸同時。bottom-end → top-start。

複数のフォールバックを列挙

.tooltip {
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}

ブラウザが順番に試し、はみ出さずに収まる最初のものを採用します。どれも収まらなければ元の配置を使います（その場合はターゲットがはみ出す — 一部のビューポートサイズでは避けられません）。

名前付き @position-try ルール

複雑なフォールバック戦略には、@position-try で名前付きルールを定義します：

@position-try --top-with-arrow {
  position-area: top;
  margin-bottom: 8px;
  --arrow-direction: down;
}

@position-try --bottom-with-arrow {
  position-area: bottom;
  margin-top: 8px;
  --arrow-direction: up;
}

.tooltip {
  position-anchor: --x;
  position-try-fallbacks: --top-with-arrow, --bottom-with-arrow;
}

--arrow-direction カスタムプロパティがフォールバックごとに変わるので、矢印のCSSも反転できます。実際の配置と矢印の向きを一致させる最もクリーンな方法です。

@position-try のブラウザサポート

組み込みキーワード（flip-block 等）は Chrome 125+、Edge 125+、Safari 26+ で動作します。名前付き @position-try ルールはやや新しく Chrome 128+。当面はキーワードを使い、名前付きルールはプログレッシブエンハンスメントとして追加してください。