CSS 앵커 위치 지정 모듈 레벨 2

1. 델타 명세

이 문서는 델타 명세로, 현재 [CSS-ANCHOR-POSITION-1]의 CSS 앵커 위치 지정 레벨 1과의 차이점만을 포함합니다.

2. 앵커 위치 지정을 위한 컨테이너 쿼리

이 섹션은 컨테이너 쿼리를 [css-conditional-5]에서 확장하여, 앵커 위치 지정을 사용해 요소의 특정 속성을 쿼리할 수 있도록 합니다.

2.1. container-type에 anchored 확장

이 명세서는 container-type 속성을 CSS Conditional 5 § 5.1 쿼리 컨테이너 생성: container-type 속성에서 정의된 것에 anchored라는 키워드를 추가하여 확장합니다. anchored는 scroll-state나 size와 같은 기존 컨테이너 타입과 조합될 수 있습니다:

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

anchored

쿼리 컨테이너를 컨테이너 쿼리용으로 설정하며, 앵커 위치가 지정된 요소의 자손들이 앵커링의 특정 특징을 기반으로 스타일링될 수 있도록 합니다. (현재는 position-try-fallbacks 중 어떤 것이 적용되는지에 한정됨)

anchored container-type은 스타일 컨테인먼트를 쿼리 컨테이너에 적용합니다.

참고: 스타일 컨테인먼트는 아래와 같이 카운터를 사용하는 경우 레이아웃 사이클을 방지하기 위해 필요합니다:

• anchored 컨테이너가 있습니다.

• 앵커 컨테이너의 자손이 fallback 쿼리를 바탕으로 카운터를 증가시킵니다.

• 앵커 컨테이너 뒤에 트리 순서로 따라오는 in-flow 요소가 카운터를 사용해 콘텐츠를 생성하며, 해당 in-flow 요소의 크기에 영향을 줍니다.

• in-flow 요소가 앵커 요소의 위치/크기에 영향을 줍니다. in-flow가 앵커 요소일 수도 있습니다.

• 앵커 요소의 변경된 위치/크기가 어떤 fallback이 선택되는지에 영향을 주고, 이는 앵커 쿼리 평가와 카운터 증가에 다시 영향을 줍니다.

#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 컨테이너는 <dashed-ident>과 <try-tactic>의 조합이 position-try-fallbacks에서 적용된 것과 일치할 경우 매칭됩니다. <dashed-ident> 또는 <try-tactic>이 쿼리 값에서 빠져있으면, position-try-fallbacks에서 적용된 값에서도 빠져있어야 하며, 반대로도 마찬가지여야 매칭됩니다.

<dashed-ident> 시도 규칙 이름은 fallback을 매칭할 때 트리 범위 이름으로 간주되지 않습니다.

<try-tactic>의 순서는 중요합니다. 예를 들어 flip-start flip-block과 flip-block flip-start는 다르므로, 순서도 fallback 쿼리에서 일치해야 합니다.

<position-area-query>

anchored 컨테이너가 <position-area>를 position-try-fallbacks에서 적용한 경우에 매칭됩니다. fallback에서 적용된 <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' fallback이 적용되면 적용됨 */
    .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' fallback이 적용되면, block-start가 'vertical-rl'에서는 '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 fallback을 쿼리할 때 사용하는 값의 문법은 <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>'는 해당 키워드가 축에 대해 모호하지 않다면 두 번째 키워드가 any인 것처럼 동작합니다. 이는 '<position-area>'에서 단일 키워드를 처리할 때 두 번째 키워드를 span-all로 취급하는 것과 다릅니다. 그 외에는 '<position-area-query>'가 축 할당 측면에서 '<position-area>'와 같이 동작합니다.

3. 보안 고려사항

이 문서에 대해 제기된 보안 이슈는 없습니다.

4. 프라이버시 고려사항

이 문서에 대해 제기된 프라이버시 이슈는 없습니다.