CSS 포함 모듈 레벨 3

1. 소개

이것은 CSS 포함 2단계와의 차이 명세입니다. 현재는 탐색적 작업 초안입니다. 구현을 진행 중이라면 2단계를 참조로 사용하시기 바랍니다. 이 초안이 CR 단계에 도달하면 2단계 텍스트를 이 문서에 병합할 예정입니다.

1.1. 모듈 상호작용

이 문서는 이전 명세에 없던 새로운 기능을 정의합니다. 또한 안정화되면 [CSS-CONTAIN-1]을 대체하고 우선하도록 목표합니다.

1.2. 값 정의

이 명세는 CSS2의 [CSS2] 속성 정의 규칙과 값 정의 문법을 [CSS-VALUES-3]에서 따릅니다. 이 명세에서 정의되지 않은 값 타입은 CSS Values & Units [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과 조합될 경우 이 값 타입의 정의가 확장될 수 있습니다.

각 속성별 값 외에도, 이 명세에서 정의된 모든 속성은 CSS 전역 키워드도 속성 값으로 허용합니다. 가독성을 위해 명시적으로 반복하지 않았습니다.

2. 강한 포함: contain 속성

CSS 포함 2 § 2 강한 포함: contain 속성

inline-size

이 값은 요소에 inline-size containment을 활성화합니다. 이는 inline-size가 주 상자의 내용에 직접적으로 의존하지 않게 합니다.

참고: 간접적인 의존성은 여전히 있을 수 있습니다. 자세한 내용은 § 3.1 인라인-크기 포함을 참조하세요.

3. 포함 유형

CSS 포함 2 § 3 포함 유형

3.1. 인라인-크기 포함

요소에 inline-size containment을 적용하면 size containment이 인라인 축 크기 지정에 적용됩니다. 즉, 인라인 축 내재 크기는 해당 요소에 내용이 없는 것처럼 결정됩니다. 그러나 내용은 상자의 블록 축 내재 크기에는 기존대로 영향을 주며, 상자는 분할(fragment)도 블록 축에서 정상적으로 허용됩니다.

일반적으로 요소의 인라인 크기와 블록 크기 관계는 예측하기 어렵고 단조롭지 않습니다. 블록 크기는 인라인 크기가 바뀔 때 임의로 위아래로 이동할 수 있습니다. 무한 반복은 레이아웃이 이전(문제였던) 상태로 되돌아가지 않도록 보장함으로써 방지됩니다. 즉, 레이아웃은 항상 "앞으로"만 이동합니다. 현재 CSS 레이아웃 명세가 이러한 규칙을 내포하고 있다고 생각하지만, 만약 그렇지 않은 부분이 있다면, CSSWG에 알려주세요 오류를 수정할 수 있도록 하겠습니다.

<section style="width: 200px; border: solid; display: flow-root;">
  <div style="float: left; width: 50px; height: 80px; background: blue;"></div>
  <div style="float: right; width: 50px; height: 80px; background: blue;"></div>
  <div style="float: left; width: 160px; height: 80px; background: navy;"></div>

  <article style="border: solid orangered; display: flow-root; min-width: min-content">
    <div style="background: orange; aspect-ratio: 1/1;">
      Article
    </div>
  </article>
</section>

요소에 inline-size containment를 부여해도, 다음 중 하나라도 해당되면 아무 효과가 없습니다:

• 요소가 principal box를 생성하지 않는 경우 (display: contents 또는 display: none의 경우)

• 내부 display type이 table인 경우

• principal box가 internal table box인 경우

• principal box가 internal ruby box이거나 non-atomic inline-level 박스인 경우

4. 컨테이너 쿼리

미디어 쿼리는 문서가 표시되는 사용자 에이전트나 디바이스 환경 (예: 뷰포트 크기 또는 사용자 환경설정)과 같은 측면을 질의할 수 있는 방법을 제공하지만, 컨테이너 쿼리는 문서 내 요소의 측면 (예: 박스 크기나 계산된 스타일)을 테스트할 수 있게 해줍니다.

기본적으로 모든 요소는 컨테이너 스타일 쿼리 목적에서 쿼리 컨테이너이며, 컨테이너 사이즈 쿼리에 대해 추가 쿼리 타입을 container-type 속성 (또는 container 단축 속성)을 지정하여 쿼리 컨테이너로 설정할 수 있습니다. 쿼리 컨테이너의 shadow 포함 자손에 적용되는 스타일 규칙은 @container 조건부 그룹 규칙을 사용하여 해당 컨테이너를 질의하여 조건부로 적용할 수 있습니다.

main, aside {
  container: my-layout / inline-size;
}

.media-object {
  display: grid;
  grid-template: 'img' auto 'content' auto / 100%;
}

@container my-layout (inline-size > 45em) {
  .media-object {
    grid-template: 'img content' auto / auto 1fr;
  }
}

선택자가 의사 요소(pseudo element)를 포함할 경우, 쿼리 컨테이너는 shadow 포함 포괄 조상을 통해 최종 기원 요소에 대해 설정할 수 있습니다.

<style>
  #container {
    width: 100px;
    container-type: inline-size;
  }
  @container (inline-size < 150px) {
    #inner::before {
      content: "BEFORE";
    }
  }
</style>
<div id=container>
  <span id=inner></span>
</div>

<div id=host style="width:200px">
  <template shadowroot=open>
    <style>
      #container {
        width: 100px;
        container-type: inline-size;
      }
      @container (inline-size < 150px) {
        ::slotted(span) {
          color: green;
        }
      }
    </style>
    <div id=container>
      <slot />
    </div>
  </template>
  <span id=slotted>Green</span>
</div>

4.1. 쿼리 컨테이너 생성: container-type 속성

container-type 속성은 해당 요소를 쿼리 컨테이너로 지정하여 컨테이너 쿼리 중 명시적 포함이 필요한 쿼리(예: 컨테이너 사이즈 쿼리) 목적에 사용합니다. 이는 자손을 스타일링하는 스타일 규칙이 해당 컨테이너의 크기 및 레이아웃 측면을 질의하고 그에 따라 반응할 수 있도록 해줍니다.

별도의 언급이 없는 한, 모든 요소는 명시적 포함이 필요하지 않은 컨테이너 쿼리(예: 컨테이너 스타일 쿼리) 목적에서는 쿼리 컨테이너입니다. container-type 지정과 관계없습니다.

값의 의미는 다음과 같습니다:

size

쿼리 컨테이너를 컨테이너 사이즈 쿼리 대상으로 지정하며, 인라인과 블록 축 모두에 적용됩니다. 레이아웃 포함, 스타일 포함, 사이즈 포함이 principal box에 적용됩니다.

inline-size

쿼리 컨테이너를 컨테이너 사이즈 쿼리 대상으로 지정하며, 해당 컨테이너의 인라인 축에 적용됩니다. 레이아웃 포함, 스타일 포함, 인라인-크기 포함이 principal box에 적용됩니다.

normal

해당 요소는 어떤 쿼리 컨테이너도 아니며, 컨테이너 사이즈 쿼리의 대상이 아닙니다. 다만, 컨테이너 스타일 쿼리의 쿼리 컨테이너 역할은 유지됩니다.

aside, main {
  container-type: inline-size;
}

h2 { font-size: 1.2em; }

@container (width > 40em) {
  h2 { font-size: 1.5em; }
}

section {
  container-type: style;
}

@container (--cards: small) {
  article {
    border: thin solid silver;
    border-radius: 0.5em;
    padding: 1em;
  }
}

4.2. 쿼리 컨테이너 이름 지정: container-name 속성

container-name 속성은 쿼리 컨테이너 이름 리스트를 지정합니다. 이 이름들은 @container 규칙에서 어떤 쿼리 컨테이너를 대상으로 할지 필터링하는 데 사용할 수 있습니다.

none

쿼리 컨테이너는 쿼리 컨테이너 이름을 갖지 않습니다.

<custom-ident>

쿼리 컨테이너 이름을 식별자로 지정합니다. none, and, not, or 키워드는 <custom-ident>로 사용될 수 없습니다.

main {
  container-type: size;
  container-name: my-page-layout;
}

.my-component {
  container-type: inline-size;
  container-name: my-component-library;
}

@container my-page-layout (block-size > 12em) {
  .card { margin-block: 2em; }
}

@container my-component-library (inline-size > 30em) {
  .card { margin-inline: 2em; }
}

4.3. 이름이 지정된 컨테이너 생성: container 단축 속성

container 단축 속성은 container-type과 container-name을 동시에 설정합니다. <'container-type'>이 생략되면, 해당 속성은 초기값으로 재설정됩니다.

main {
  container: my-layout / size;
}

.grid-item {
  container: my-component / inline-size;
}

4.4. 컨테이너 쿼리: @container 규칙

@container 규칙은 조건부 그룹 규칙이며, 조건은 컨테이너 쿼리로, 이는 컨테이너 사이즈 쿼리 및/또는 컨테이너 스타일 쿼리의 불리언 조합입니다. <stylesheet> 블록 내에 선언된 스타일은 필터링되어, 해당 컨테이너 쿼리가 해당 요소의 쿼리 컨테이너에 대해 참일 때만 적용됩니다.

@container 규칙의 문법은 다음과 같습니다:

@container [ <container-name> ]? <container-condition> {
  <stylesheet>
}

각 용어의 정의:

<container-name> = <custom-ident>
<container-condition> = not <query-in-parens>
                      | <query-in-parens> [ [ and <query-in-parens> ]* | [ or <query-in-parens> ]* ]
<query-in-parens>     = ( <container-condition> )
                      | ( <size-feature> )
                      | style( <style-query> )
                      | <general-enclosed>

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

none, and, not, or 키워드는 위의 <custom-ident>로 사용할 수 없습니다.

각 요소에 대해, 질의에 사용될 쿼리 컨테이너는 해당 요소의 조상 쿼리 컨테이너 중 <container-condition> 내 모든 컨테이너 기능에 대해 유효한 쿼리 컨테이너로 설정된 것 중에서 선택됩니다. 선택적 <container-name>은 쿼리 컨테이너들 중 이름이 일치하는 쿼리 컨테이너 이름을 가진 컨테이너만 고려하도록 필터링합니다.

적격 쿼리 컨테이너가 요소에 대해 선택되면, <container-condition> 내의 각 컨테이너 기능이 해당 쿼리 컨테이너에 대해 평가됩니다. 조상 중 적격 쿼리 컨테이너가 없으면, 해당 요소의 컨테이너 쿼리는 unknown으로 간주됩니다.

@container card (inline-size > 30em) and style(--responsive: true) {
  /* styles */
}

여러 중첩된 컨테이너 쿼리 내부의 요소에 정의된 스타일 규칙은, 해당 요소에 대해 모든 감싸는 컨테이너 쿼리가 참일 때 적용됩니다.

참고: 중첩된 컨테이너 쿼리는 서로 다른 컨테이너를 기준으로 평가될 수 있으므로, 개별 <container-condition>을 하나의 쿼리로 합치는 것이 항상 가능한 것은 아닙니다.

@container card (inline-size > 30em) {
  @container style(--responsive: true) {
    /* styles */
  }
}

글로벌, 이름 정의 at-rule (@keyframes, @font-face, @layer 등) 이 컨테이너 쿼리 내에 정의될 경우, 해당 컨테이너 쿼리 조건에 의해 제한되지 않습니다.

4.5. 애니메이션 컨테이너

컨테이너 쿼리의 평가 변경은 스타일 변경 이벤트의 일부여야 하며, 그 변경이 애니메이션 효과에 의해 발생했더라도 마찬가지입니다.

main {
  display: flex;
  width: 300px;
}

#container {
  container-type: inline-size;
  flex: 1;
}

/* 해결된 너비는 처음에는 200px이지만, #sibling에서 트랜지션이 진행됨에 따라 변경됩니다. */
#inner {
  transition: 1s background-color;
  background-color: tomato;
}

/* 이 컨테이너 쿼리가 적용되기 시작하거나 중단될 때, #inner의 background-color에 트랜지션이 시작되어야 합니다. */
@container (width <= 150px) {
  #inner {
    background-color: skyblue;
  }
}

#sibling {
  width: 100px;
  transition: width 1s;
}

#sibling:hover {
  width: 200px;
}

<main>
  <div id=container>
    <div id=inner>이너</div>
  </div>
  <div id=sibling>형제</div>
</main>

container query length 단위로 인해 발생한 계산된 값의 변경도 스타일 변경 이벤트의 일부가 되어야 합니다.

5. 컨테이너 기능

컨테이너 기능은 쿼리 컨테이너의 특정 측면을 쿼리합니다.

5.1. 크기 컨테이너 기능

컨테이너 크기 쿼리는 쿼리 컨테이너의 principal box의 크기를 쿼리할 수 있게 합니다. 이는 개별 크기 기능 (<size-feature>)의 불리언 조합이며, 각각 쿼리 컨테이너의 단일, 특정 차원 기능을 쿼리합니다. <size-feature>의 문법은 미디어 기능과 동일합니다: 기능 이름, 비교자, 값. [mediaqueries-5] 크기 기능을 크기 쿼리로 결합하는 불리언 문법과 논리는 CSS 기능 쿼리와 동일합니다. (@supports 참조. [CSS-CONDITIONAL-3])

쿼리 컨테이너가 principal box를 가지고 있지 않거나, principal box가 layout containment box가 아니거나, 쿼리 컨테이너가 관련 축에서 컨테이너 크기 쿼리를 지원하지 않는 경우, 크기 기능의 평가 결과는 알 수 없습니다.

상대 길이 단위 (컨테이너 쿼리 길이 단위 포함) 컨테이너 쿼리 조건에서 계산된 값을 기준으로 쿼리 컨테이너에서 평가됩니다.

참고: 이는 미디어 쿼리에서 상대 단위가 처리되는 방식과 다릅니다.

aside, main {
  container-type: inline-size;
}

aside { font-size: 16px; }
main { font-size: 24px; }

@container (width > 40em) {
  h2 { font-size: 1.5em; }
}

5.1.1. 너비: width 기능

width 컨테이너 기능은 너비를 쿼리 컨테이너의 content box에서 쿼리합니다.

5.1.2. 높이: height 기능

height 컨테이너 기능은 높이를 쿼리 컨테이너의 content box에서 쿼리합니다.

5.1.3. 인라인 크기: inline-size 기능

inline-size 컨테이너 기능은 크기를 쿼리 컨테이너의 content box에서 쿼리하며, 쿼리 컨테이너의 인라인 축을 기준으로 합니다.

5.1.4. 블록 크기: block-size 기능

block-size 컨테이너 기능은 크기를 쿼리 컨테이너의 content box에서 쿼리하며, 쿼리 컨테이너의 블록 축을 기준으로 합니다.

5.1.5. 종횡비: aspect-ratio 기능

aspect-ratio 컨테이너 기능은 width 컨테이너 기능의 값과 height 컨테이너 기능의 값의 비율로 정의됩니다.

5.1.6. 방향성: orientation 기능

portrait

orientation 컨테이너 특성은 portrait이며, height 컨테이너 특성의 값이 width 컨테이너 특성의 값보다 크거나 같을 때 입니다.

landscape

그 외의 경우 orientation은 landscape입니다.

5.2. 스타일 컨테이너 특성

컨테이너 스타일 쿼리는 computed value를 query container에서 조회할 수 있게 합니다. 이는 개별적인 스타일 특성 (<style-feature>)의 불리언 조합이며, 각각은 query container의 단일, 특정 프로퍼티를 조회합니다. <style-feature>의 문법은 declaration과 동일합니다. [CSS-SYNTAX-3] 쿼리는 주어진 프로퍼티의 computed value가 query container에서 주어진 값과 일치하면 true가 되고, (값도 computed되어 query container 기준으로 평가됨) 프로퍼티나 값이 잘못되었거나 지원되지 않으면 unknown, 그 외는 false입니다. 스타일 특성을 스타일 쿼리로 불리언 결합하는 문법과 논리는 CSS feature queries와 동일합니다. (@supports 참고. [CSS-CONDITIONAL-3])

스타일 특성이 shorthand property를 조회한다면, 각 longhand property의 computed value가 일치하면 true, 그렇지 않으면 false입니다.

cascade 의존 키워드 (예: revert 및 revert-layer)는 스타일 특성 값으로는 유효하지 않으며, 컨테이너 스타일 쿼리를 false로 만듭니다.

참고: 나머지 cascade에 의존하지 않는 CSS-wide 키워드는 computed되어 query container 기준으로 평가됩니다. 다른 값들과 동일하게 처리됩니다.

6. 컨테이너 상대 길이: cqw, cqh, cqi, cqb, cqmin, cqmax 단위

컨테이너 쿼리 길이 단위는 query container의 치수를 기준으로 하는 상대 길이를 지정합니다. 컨테이너 쿼리 길이 단위를 사용하면 컴포넌트를 더 쉽게 다른 query container로 옮길 수 있습니다.

컨테이너 쿼리 길이 단위는 다음과 같습니다:

각 요소에 대해 컨테이너 쿼리 길이 단위는 해당 축(또는 축들)에 대해 컨테이너 크기 쿼리로 평가됩니다. 각 축에 대한 query container는 해당 축에 대해 컨테이너 크기 쿼리를 허용하는 가장 가까운 상위 컨테이너입니다. 적합한 query container가 없다면, 해당 축에 대해 작은 뷰포트 크기를 사용합니다.

참고: 어떤 경우에는 동일한 요소의 cqi와 cqb 단위가 서로 다른 query container 기준으로 평가될 수 있습니다. 마찬가지로 cqmin과 cqmax 단위는 cqi 및 cqb의 더 크거나 작은 값을 나타내며, 이 차원이 서로 다른 query container에서 올 수도 있습니다.

자식 요소는 부모에 지정된 상대 값 자체를 상속하지 않고, computed value를 상속합니다.

/* 폴백 값은 containment에 의존하지 않음 */
h2 { font-size: 1.2em; }

@container (inline-size >= 0px) {
  /* inline-size 컨테이너가 있을 때만 적용됨 */
  h2 { font-size: calc(1.2em + 1cqi); }
}

7. API

7.1. CSSContainerRule 인터페이스

CSSContainerRule 인터페이스는 @container 룰을 나타냅니다.

[Exposed=Window]
interface CSSContainerRule : CSSConditionRule {
};

conditionText of type CSSOMString (CSSContainerRule 전용 정의, CSSConditionRule의 attribute)

CSSConditionRule의 부모 룰에 정의된 conditionText attribute는, getter로 얻었을 때 지정된 조건을 반환해야 하며, 어떠한 논리적 단순화 없이 반환되어야 합니다. 반환된 조건은 명세를 준수하는 모든 구현(미래 확장까지 포함하여 <general-enclosed> 확장 메커니즘을 구현한 경우도 포함) 에서 지정된 조건과 동일한 결과를 평가해야 합니다. 즉, 토큰 스트림의 단순화(공백을 하나로 줄이거나, 선택적으로 생략 가능한 경우 생략 등)는 허용되지만, 논리적 단순화(불필요한 괄호 제거, 결과 평가에 기반한 단순화 등)는 허용되지 않습니다.

CSSContainerRule에 대한 CSSOM API 추가 [Issue #7033]

Container Queries는 matchContainer 메서드를 가져야 합니다. 이는 matchMedia() 및 MediaQueryList 인터페이스를 모델로 하지만, Window가 아니라 Element에 적용됩니다. 레이아웃 크기를 측정할 때 resizeObserver와 유사하게 동작하지만, 추가적인 Container Query 문법 및 기능을 제공합니다. [Issue #6205]

8. 요소의 콘텐츠 전체 숨기기: content-visibility 프로퍼티

CSS Containment 2 § 4 요소의 콘텐츠 전체 숨기기: content-visibility 프로퍼티

9. 프라이버시 및 보안 고려사항

CSS Containment 2 § 5 프라이버시 및 보안 고려사항

부록 A. 변경사항

이 부록은 정보용입니다.

2021년 12월 21일 첫 공개 작업 초안 이후 변경사항

2021년 12월 21일 첫 공개 작업 초안 이후 주요 변경사항은 다음과 같습니다:

• container-name의 computed value가 중복 식별자를 포함하는 것을 허용. (Issue 7181)

• <'container-name'>을 container shorthand에서 필수로 만듦. (Issue 7142)

• shorthand property의 container style query 처리 명확화. (Issue 7095)

• cascade 의존 키워드는 style feature 값으로 허용되지 않으며, container style query를 false로 만듦. (Issue 7080)

• container-type의 초기값을 style로 변경. (Issue 6393)

• container-type에서 block-size 값을 제거. 단일 축 block-size containment는 현재 불가능함. (Issue 1031)

• <string> 옵션을 container-name 문법에서 제거. 컨테이너 이름은 <custom-ident>이어야 함. (Issue 6405)

• <'container-name'>과 <'container-type'>의 순서를 container shorthand에서 반대로 하고, 둘 다 옵션으로 변경. (Issue 6393)

• <general-enclosed> 문법을 <container-condition>에 허용, 향후 호환성을 위해. (Issue 6396)

• <size-feature> 쿼리에서 size function 문법 제거. (Issue 6870)

• query container 선택 과정을 필요한 container-type을 고려하도록 수정하고, 명시적 타입 선택 문법을 제거. (Issue 6644)

• 보류된 state query feature 제거. (Issue 6402)

• pseudo-element 및 shadow-DOM 주변의 컨테이너 선택 명확화. (Issue 5984, Issue 6711)

CSS Containment Level 2와의 변경점

• inline-size containment 도입.

• Container Query에 필요한 용어, 프로퍼티, 단위, at-rule 정의.

CSS Containment 2 §  변경사항

감사의 글

다음의 코멘트와 이전 작업이 이 명세에 기여했습니다: Adam Argyle, Amelia Bellamy-Royds, Anders Hartvoll Ruud, Brian Kardell, Chris Coyier, Christopher Kirk-Nielsen, David Herron, Elika J. Etemad (fantasai), Eric Portis, Ethan Marcotte, Geoff Graham, Gregory Wild-Smith, Ian Kilpatrick, Jen Simmons, Kenneth Rohde Christiansen, L. David Baron, Lea Verou, Martin Auswöger, Martine Dowden, Mike Riethmuller, Morten Stenshorne, Nicole Sullivan, Rune Lillesveen, Scott Jehl Scott Kellum, Stacy Kvernmo, Theresa O’Connor, Una Kravets, 그리고 많은 분들이 이 명세에 기여했습니다.