Anchor position container queries
CSS Anchor Positioning APIと連携し、アンカー配置された要素のフォールバック位置に応じてスタイルを切り替えられます。例えば、ツールチップが上に表示できない場合に下に移動した際、矢印の向きを自動的に変更するといった制御が可能です。ポップオーバーやツールチップのような位置依存UIの洗練に貢献する新しい機能です。
概要
CSS Anchor Positioning APIと連携し、アンカー配置された要素のフォールバック位置に応じてスタイルを切り替えられます。例えば、ツールチップが上に表示できない場合に下に移動した際、矢印の向きを自動的に変更するといった制御が可能です。ポップオーバーやツールチップのような位置依存UIの洗練に貢献する新しい機能です。
対応ブラウザ
デスクトップ
Chrome 143+
Edge 143+
Safari 未対応
Firefox 未対応
モバイル
Chrome Android 143+
Safari iOS 未対応
Firefox Android 未対応
基本構文
CSS
.tooltip {
position: absolute;
position-anchor: --trigger;
}
@container anchored(fallback: bottom) {
.tooltip::before { transform: rotate(180deg); }
}実務での使いどころ
-
アンカー位置に応じたツールチップの自動調整
ツールチップのフォールバック位置（上下左右）に応じて矢印の向きやスタイルを自動的に切り替えられます。
注意点
- Chrome 143以降でのみサポートされる非常に新しい機能です。CSS Anchor Positioning 自体もまだ対応ブラウザが限られています。
アクセシビリティ
- アンカー配置のUIでは、キーボード操作やスクリーンリーダーでもツールチップやポップオーバーの内容にアクセスできることを確認してください。