CSSアンカーポジショニングモジュール レベル2

1. デルタ仕様

これはデルタ仕様であり、現時点ではCSS Anchor Positioning Level 1 [CSS-ANCHOR-POSITION-1]との違いのみを記載しています。

2. アンカーポジショニング用コンテナクエリ

このセクションでは、コンテナクエリを[css-conditional-5]から拡張し、 アンカーポジショニングを用いて要素の特定の側面をクエリできるようにします。

2.1. container-typeへのanchoredの拡張

本仕様はCSS Conditional 5 § 5.1「クエリコンテナの作成：container-typeプロパティ」で定義されているcontainer-typeプロパティに新しいanchoredキーワードを追加します。anchoredは、既存のcontainer-type（scroll-stateやsizeなど）と組み合わせて利用できます：

normal | [ [ size | inline-size ] || scroll-state || anchored ]

anchored

クエリコンテナをcontainer queries用に確立し、アンカーポジショニング要素の子孫をアンカーの特徴に応じてスタイル付けできるようにします。（現在は、position-try-fallbacksの適用状況のみが対象です。）

anchoredコンテナタイプは、style containmentをクエリコンテナへ適用します。

注意: スタイル包含は、以下のような状況でレイアウトサイクルを防ぐために必要です：

• anchoredコンテナがある場合

• アンカ―付きコンテナの子孫がフォールバッククエリに基づいてカウンターをインクリメントする場合

• アンカ―付きコンテナの次にツリー順で現れるin-flow要素が、カウンターを使った内容を生成し、そのサイズに影響する場合

• in-flow要素がアンカー要素の位置やサイズに影響する場合。実際、in-flowがアンカー要素そのものの場合もあります。

• アンカー要素の位置やサイズが変化すると、どのフォールバックが選択されるかが変わり、アンカー付きクエリの評価やカウンターの値が影響されます。

#anchored { container-type: anchored; }
#anchored-size { container-type: anchored inline-size; }

2.2. @container構文へのanchored クエリの拡張

anchoredコンテナをクエリするために、新しいanchored()関数が@container構文に追加されます。これは、'<query-in-parens>'文法に以下の生成規則を追加します：

<query-in-parens> = ...
                  | anchored( <anchored-query> )

<anchored-query> = not <anchored-in-parens>
                | <anchored-in-parens> [ [ and <anchored-in-parens> ]* | [ or <anchored-in-parens> ]* ]
                | <anchored-feature>
<anchored-in-parens> = ( <anchored-query> )
                    | ( <anchored-feature> )
                    | <general-enclosed>

2.3. アンカ―付きコンテナの機能

2.3.1. 適用されたposition-try-fallbacks： fallback機能

fallback コンテナ機能は、アンカーポジショニングされた要素にどのposition-try-fallbacksオプションが適用されているかをクエリします。

none

anchoredコンテナにはposition-try-fallbacksが一切適用されていません。

<dashed-ident> || <try-tactic>

anchoredコンテナは、position-try-fallbacksから適用された<dashed-ident>と<try-tactic>の組み合わせと一致します。 クエリ値から<dashed-ident>や<try-tactic>が省略されている場合、適用値からも省略されていなければならず、逆も同様です。

<dashed-ident>トライルール名は、ツリースコープ名とはみなされません。fallbackの一致のためです。

<try-tactic>の順序は重要です。例えばflip-start flip-blockとflip-block flip-startは異なるため、fallbackクエリでも順序が一致する必要があります。

<position-area-query>

anchoredコンテナは、<position-area>がposition-try-fallbacksから適用されています。クエリは、フォールバックから適用された<position-area>とクエリ値が同じ物理領域を表していれば一致します。例えば、block-startは、topと一致します（writing-modeがhorizontal-tbの場合）。

クエリ値がanyの場合、その軸については常に一致します。

#container {
  container-type: anchored;
  position: absolute;
  position-anchor: --a;
  position-area: left;
  position-try-fallbacks: right;
  &::before { content: ">"; }

  @container anchored(fallback: right) {
    &::before { content: "<"; };
  }
}

.anchored {
  container-type: anchored;
  position-try-fallbacks: --foo, --bar flip-inline;

  @container anchored(fallback: --bar flip-inline) {
    /* '--bar'のフォールバックが適用された場合に有効 */
    .inner { background-color: green; }
  }
  @container anchored(fallback: --bar) {
    /* try-tacticも一致しないと適用されません */
    .inner { background-color: red; }
  }
}

.anchored {
  container-type: anchored;
  position-anchor: --a;
  position-try-fallbacks: right;
  writing-mode: vertical-rl;

  @container anchored(fallback: self-block-start) {
    /* 'right'フォールバックが適用される場合（vertical-rlではblock-startが'right'）に有効 */
    .inner { background-color: green; }
  }
}

.anchored {
  container-type: anchored;
  position-anchor: --a;
  position-try-fallbacks: bottom right;
  writing-mode: vertical-rl;

  @container anchored(fallback: bottom any) {
    /* 'any'が'right'にも一致するため適用されます。 */
    .inner { color: lime; }
  }
  @container anchored(fallback: right) {
    /* 垂直軸の暗黙的な'any'が'bottom'にも一致するため適用されます。 */
    .inner { background-color: green; }
  }
}

2.3.2. <position-area-query>値の構文

position-areaフォールバックをクエリする値は、<position-area>と同じ構文ですが、 すべての生成規則にanyキーワードが追加されています。

<position-area-query> = [
  [ left | center | right | span-left | span-right
  | x-start | x-end | span-x-start | span-x-end
  | self-x-start | self-x-end | span-self-x-start | span-self-x-end
  | span-all | any ]
  ||
  [ top | center | bottom | span-top | span-bottom
  | y-start | y-end | span-y-start | span-y-end
  | self-y-start | self-y-end | span-self-y-start | span-self-y-end
  | span-all | any ]
|
  [ block-start | center | block-end | span-block-start | span-block-end | span-all | any ]
  ||
  [ inline-start | center | inline-end | span-inline-start | span-inline-end
  | span-all | any ]
|
  [ self-block-start | center | self-block-end | span-self-block-start
  | span-self-block-end | span-all | any ]
  ||
  [ self-inline-start | center | self-inline-end | span-self-inline-start
  | span-self-inline-end | span-all | any ]
|
  [ start | center | end | span-start | span-end | span-all | any ]{1,2}
|
  [ self-start | center | self-end | span-self-start | span-self-end | span-all | any ]{1,2}
]

any

anyは、軸の一方または両方で使用可能です。どちらの軸を指すかは曖昧であり、<position-area>の他の曖昧なキーワード（startやcenterなど）と同様に、 軸の割り当てや単一キーワード値の複製時に扱われます。

start, end, self-start, self-end

top, bottom, left, right

y-start, y-end, self-y-start, self-y-end

x-start, x-end, self-x-start, self-x-end

block-start, block-end, self-block-start, self-block-end

inline-start, inline-end, self-inline-start, self-inline-end

center

span-start, span-end, span-self-start, span-self-end

span-top, span-bottom, span-left, span-right

span-y-start, span-y-end, span-self-y-start, span-self-y-end

span-x-start, span-x-end, span-self-x-start, span-self-x-end

span-block-start, span-block-end, span-self-block-start, span-self-block-end

span-inline-start, span-inline-end, span-self-inline-start, span-self-inline-end

span-all

「<position-area>」の定義を参照してください。

単一のキーワードのみが与えられた場合、'<position-area-query>'は、そのキーワードが軸について曖昧でなければ2番目のキーワードがanyであるかのように動作します。 これは、'<position-area>'の単一キーワードの扱いとは異なり、そちらは2番目のキーワードがspan-allであるかのように動作します。 それ以外は、'<position-area-query>'は軸割り当てに関して'<position-area>'と同様に振る舞います。

3. セキュリティに関する考慮事項

本書に関してセキュリティ上の問題は報告されていません。

4. プライバシーに関する考慮事項

本書に関してプライバシー上の問題は報告されていません。