Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

Anchor position container queries

CSS Anchor Positioning APIと連携し、アンカー配置された要素のフォールバック位置に応じてスタイルを切り替えられます。例えば、ツールチップが上に表示できない場合に下に移動した際、矢印の向きを自動的に変更するといった制御が可能です。ポップオーバーやツールチップのような位置依存UIの洗練に貢献する新しい機能です。

コンテナクエリアンカー配置

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
anchor position queries
実験的
143
143
143
anchor position queries fallback
実験的

「フォールバック」機能
143
143
143
anchor position queries fallback any value
実験的

「任意の」クエリ値
143
143
143
CSS プロパティ
anchored
実験的
143
143
143
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.tooltip {
  position: absolute;
  position-anchor: --trigger;
}
@container anchored(fallback: bottom) {
  .tooltip::before { transform: rotate(180deg); }
}

ライブデモ

ツールチップ上

CSS の ツールチップ上 パターンです。

プレビュー全画面表示

ツールチップ下

CSS の ツールチップ下 パターンです。

プレビュー全画面表示

右側ポップオーバー

CSS の 右側ポップオーバー パターンです。

プレビュー全画面表示

実務での使いどころ

  • アンカー位置に応じたツールチップの自動調整

    ツールチップのフォールバック位置（上下左右）に応じて矢印の向きやスタイルを自動的に切り替えられます。

注意点

  • Chrome 143以降でのみサポートされる非常に新しい機能です。CSS Anchor Positioning 自体もまだ対応ブラウザが限られています。

アクセシビリティ

  • アンカー配置のUIでは、キーボード操作やスクリーンリーダーでもツールチップやポップオーバーの内容にアクセスできることを確認してください。

参考リンク