CSS anchor positioning API

Una Kravets

CSS Anchor Positioning API を使用すると、他の要素（アンカー）を基準として要素を配置できます。この API を使用すると、メニューやサブメニュー、ツールチップ、セレクト、ラベル、カード、設定ダイアログなど、多くのインターフェース機能の複雑なレイアウト要件を簡素化できます。ブラウザにアンカーの位置決め機能が組み込まれているため、サードパーティのライブラリに頼ることなく階層化されたユーザー インターフェースを構築して、クリエイティブな可能性の世界を開くことができます。

基本コンセプト: アンカーと配置された要素

この API の中心となるのは、アンカーと配置された要素の関係です。アンカーは、anchor-name プロパティを使用して基準点として指定される要素です。配置された要素とは、position-anchor プロパティを使用してアンカーに対して配置された要素、または配置ロジックで anchor-name を明示的に使用して配置された要素です。

アンカーを設定する

アンカーの作成は簡単です。選択した要素に anchor-name プロパティを適用し、一意の ID を割り当てます。この一意の識別子には、CSS 変数と同様に二重ダッシュを先頭に追加する必要があります。

.anchor-button {
    anchor-name: --anchor-el;
}

アンカー名を割り当てると、.anchor-button はアンカーとして機能し、他の要素の配置をガイドします。このアンカーを他の要素に接続するには、次のいずれかの方法を使用します。

暗黙的アンカー

アンカーを別の要素に接続する最初の方法は、次のコード例のように暗黙的なアンカーを使用する方法です。position-anchor プロパティは、アンカーに接続する要素に追加され、アンカーの名前（この場合は --anchor-el）が値として設定されます。

.positioned-notice {
    position-anchor: --anchor-el;
}

暗黙的なアンカー関係では、最初の引数でアンカー名を明示的に指定しなくても、anchor() 関数を使用して要素を配置できます。

.positioned-notice {
    position-anchor: --anchor-el;
    top: anchor(bottom);
}

明示的なアンカー

または、アンカー関数でアンカー名を直接使用することもできます（例: top: anchor(--anchor-el bottom）。これは明示的なアンカーと呼ばれ、複数の要素にアンカーする場合に便利です（例については、後述をご覧ください）。

.positioned-notice {
    top: anchor(--anchor-el bottom);
}

アンカーを基準とした要素の配置

物理的なプロパティを含むアンカーの配置図。

アンカー ポジショニングは CSS の絶対位置に基づいています。配置値を使用するには、配置された要素に position: absolute を追加する必要があります。次に、anchor() 関数を使用して、配置値を適用します。たとえば、アンカー要素をアンカー要素の左上に配置するには、次の配置を使用します。

.positioned-notice {
    position-anchor: --anchor-el;
    /* absolutely position the positioned element */
    position: absolute;
    /* position the right of the positioned element at the right edge of the anchor */
    right: anchor(right);
    /* position the bottom of the positioned element at the top edge of the anchor */
    bottom: anchor(top);
}

これで、次のように 1 つの要素が別の要素にアンカーされます。

これらの値に論理的な配置を使用する場合、同等の値は次のとおりです。

• top = inset-block-start
• left= inset-inline-start
• bottom = inset-block-end
• right= inset-inline-end

anchor-center を使用して配置された要素を中央揃えにする

アンカーに配置された要素をアンカーに対して簡単に中央に配置できるように、justify-self、align-self、justify-items、align-items プロパティで使用できる anchor-center という新しい値が追加されました。

この例では、justify-self: anchor-center を使用して、配置された要素をアンカーの上に中央に配置することで、前の例を変更しています。

.positioned-notice {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of positioned elem at top of anchor  */
  bottom: anchor(top);
  /*  Center justification to the anchor */
  justify-self: anchor-center;
}

複数のアンカー

要素は複数のアンカーにテザリングできます。つまり、複数のアンカーを基準とした位置の値を設定しなければならない場合があります。これを行うには、anchor() 関数を使用して、参照するアンカーを最初の引数で明示的に指定します。次の例では、配置された要素の左上が 1 つのアンカーの右下に固定され、配置された要素の右下が 2 つ目のアンカーの左上に固定されています。

.anchored {
  position: absolute;
  top: anchor(--one bottom);
  left: anchor(--one right);
  right: anchor(--two left);
  bottom: anchor(--two top);
}

position-area での位置

アンカーリング API には、position-area プロパティを使用する新しいレイアウト メカニズムが含まれています。

このプロパティを使用すると、アンカー配置された要素をそれぞれのアンカーに対して配置できます。アンカー要素が中央にある 9 セルのグリッドで機能します。

絶対配置ではなく position-area を使用するには、物理値または論理値を指定して position-area プロパティを使用します。例:

• 上中央: position-area: top または position-area: block-start
• 左中央: position-area: left または position-area: inline-start
• 中央下: position-area: bottom または position-area: block-end
• 右中央: position-area: right または position-area: inline-end

これらのポジションについて詳しくは、次のツールをご覧ください。

anchor-size() で要素のサイズを指定

anchor-size() 関数は、アンカー ポジショニング API の一部でもあり、アンカーのサイズ（幅、高さ、インライン サイズ、ブロックサイズ）に基づいて、アンカー ポジショニングされた要素のサイズや位置を指定できます。

次の CSS は、高さにこの関数を使用する例を示しています。calc() 関数内で anchor-size(height) を使用して、ツールチップの最大高さをアンカーの高さの 2 倍に設定しています。

.positioned-notice {
  position-anchor: --question-mark;

  /*  set max height of the tooltip to 2x height of the anchor  */
  max-height: calc(anchor-size(height) * 2);
}

ポップオーバーやダイアログなどの最上位レイヤ要素でアンカーを使用する

アンカーの配置は、popover などの最上位レイヤの要素で非常に効果的です。と <dialog>。これらの要素は DOM サブツリーの他の部分とは別のレイヤに配置されますが、アンカーの位置指定により、最上層にない要素をテザリングして戻したり、一緒にスクロールしたりできます。これは、階層化されたインターフェースにとって大きな利点です。

次の例では、ボタンを使用して一連のツールチップ ポップオーバーを開いています。ボタンがアンカーで、ツールチップが配置された要素です。配置した要素は、他のアンカー要素と同様にスタイルを設定できます。この例では、anchor-name と position-anchor はボタンとツールチップのインライン スタイルです。各アンカーには一意のアンカ名が必要であるため、動的コンテンツを生成する場合は、インライン化が最も簡単な方法です。