公開日: 2025 年 10 月 29 日
Chrome 143 以降では、アンカー付きコンテナクエリを使用して、アンカー付き要素がフォールバック アンカー位置決めを使用しているかどうかを特定できます。この記事では、この機能で解決される問題について説明します。
CSS アンカー配置 API は、要素（ポップオーバーなど）を別の要素（アンカー）に固定し、要素のスペースがなくなった場合に使用される一連の配置試行フォールバックを定義する強力な方法を提供します。たとえば、アンカー要素が最初は上部に表示されるようにスタイル設定されていても、スクロールして画面の端に達すると、ブラウザが「反転」を処理してビューポート内に維持できます。
しかし、アンカー位置指定の仕様のレベル 1 には大きなギャップがありました。CSS で要素をフォールバック位置に移動することはできましたが、どのフォールバックが選択されたかを知る方法はありませんでした。つまり、最終的な位置に基づいて異なるスタイルを適用することはできませんでした。ツールチップが下から上に反転した場合、JavaScript で修正しない限り、矢印は間違った方向を指したままになります。
アンカー付きコンテナ クエリ（CSS アンカー位置レベル 2 仕様で定義）は、この問題を解決し、CSS アンカー位置に欠けていたコンテキスト認識を提供します。
仕組み: 代替のクエリ
アンカー付きコンテナ クエリを使用すると、ブラウザがアンカーの位置を解決した方法に基づいてスタイルを適用できます。
これは、次の 2 つの新しい CSS 機能で設定されています。
container-type: anchored: 配置された要素（ツールチップなど）に適用します。これにより、アンカーの位置決め状態を「認識」するクエリ コンテナに変換されます。@container anchored(fallback: ...): この新しい @ 規則構文を使用すると、最終的に使用された position-try-fallbacks オプションをクエリできます。
ツールチップを下に配置したいが、上に配置することも可能にしたいとします。次のコード:
- 最初に、
.tooltipをアンカー（--my-anchor）の下部に配置しようとします。 - 収まらない場合は、フォールバックによって上部に移動します。
@containerクエリはこれを検出します。トップ フォールバックが適用されると、anchored(fallback: top)クエリが true になります。- これにより、::before 疑似要素のコンテンツを上矢印（▲）から下矢印（▼）に変更し、その位置を調整できます。
/* The element our tooltip is anchored to */
.anchor {
anchor-name: --my-anchor;
}
/* The positioned element (tooltip) */
.tooltip {
/* Use anchor positioning to set fallbacks */
position: absolute;
margin-top: 1rem;
position-anchor: --my-anchor;
position-area: bottom;
position-try-fallbacks: flip-block; /* Reposition in the block direction */
/* Make it an anchored query container */
container-type: anchored;
/* Add a default "up" arrow */
&::before {
content: '▲';
position: absolute;
bottom: 100%; /* Sits on top of the tooltip, pointing up */
}
}
/* Use the anchored query to check the fallback */
@container anchored(fallback: flip-block) {
.tooltip::before {
/* The 'top' fallback was used, so flip the arrow */
content: '▼';
bottom: auto;
top: 100%; /* Move the arrow below the tooltip */
}
}
これらはすべて CSS で行われ、JavaScript、オブザーバー、追加のクラスは使用されません。注: ポップオーバー API を使用している場合、暗黙的なアンカー関係が作成されるため、アンカーに明示的に名前を付ける必要はありません。
次のデモでは、ボーダーハックを使用して CSS の三角形を作成し、アンカー付きクエリで三角形を再配置しています。
まとめ
アンカー付きクエリを使用すると、CSS ブラウザは、配置された要素の現在のアンカー位置を認識できます。つまり、はるかに復元力があり、コンテキストを認識するコンポーネントを構築できます。ツールチップの矢印は一例です。次のようなこともできます。
- メニューが反転したときに背景色を変更します。
- 枠線のスタイルをアンカーに最も近いエッジに移動します。
- ポップオーバーの border-radius を調整して、「接続」された角を正方形にします。
- フォールバック位置に応じて要素のアニメーションを変化させます。
これはアンカー ポジショニングとコンポーネント ライブラリ全般にとって大きなメリットであり、より少ないコードでより堅牢で自己完結型の UI 要素を実現できます。