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