tl;dr

How to

1. container query로 "볼" element에 container-type으로 "containment context"를 지정한다.
2. container-type은 아래와 같은 옵션들이 있다.
   • size: 'containment context로 지정된 element의 "inline", "block" layout 정보를 다 쓰겠다.'
   • inline-size: '"inline" layout 정보만 쓰겠다.'
   • normal: 'layout 정보는 안쓰겠다.'
3. container-name으로 naming도 할 수 있다. (grid-area랑 비슷한 머시기라고 생각하자.)
4. 위 둘을 줄여서 container: {name} / {type} 로 쓸 수 있다.
5. @container {name} ({condition}) { ... }로 스타일을 정의한다.
6. container queries용 unit도 따로 있다.
   • cqw: containment context element width의 1%
   • cqh: height의 1%
   • cqi: inline size의 1%
   • cqb: block size의 1%
   • cqmin: cqi와 cqb 중 작은 값
   • cqmax: 큰 값

"width랑 inline size랑 같은 거 아니에요?"

writing mode가 vertical일 경우를 생각해보시면...

Refs

• CSS container queries

비고

• 2023년 6월 현재 style queries는 아직 제대로 지원되지 않음