요약

  • W3C가 2021년 12월 21일 낸 CSS Containment Level 3 첫 공개 초안은 화면 환경을 묻는 미디어 쿼리와 문서 안 요소를 묻는 컨테이너 쿼리를 구분했다. container-type은 쿼리 대상 조상을 만들고 @container는 그 자손의 스타일을 조건에 따라 적용한다.
  • 2022년 8월 18일 초안은 크기 조건, 컨테이너 이름과 상대 단위를 다듬었다. 본문과 옆 칸에 같은 구성 요소를 놓아 지역별 크기에 따라 배열이 달라지는 예를 실었다.

카드는 본문에서 폼이 났다. 사진은 왼쪽, 제목과 설명은 오른쪽. 편집자가 같은 카드를 옆 칸으로 옮기자 여유가 사라졌다. 넓은 화면을 기준으로 한 미디어 쿼리는 여전히 화면이 넓다고 말했다. 화면에 관해서는 맞는 말이었다. 카드가 새로 들어간 공간에 관해서는 쓸모없는 말이었다. 큰 집에 산다고 모든 방이 넓은 것은 아니다.

2021년 12월 21일 W3C 첫 공개 초안은 질문의 대상을 바꿨다. 미디어 쿼리는 뷰포트 같은 표시 환경을 살핀다. 컨테이너 쿼리는 문서 속 요소의 상자 크기 같은 특성을 살핀다. 같은 구성 요소가 한 페이지의 여러 자리로 이동할 때, 창의 폭은 한 가지지만 각 자리가 내주는 폭은 다르다. 카드에는 자기 방의 치수가 필요했다.

제작자는 container-type으로 크기를 물을 수 있는 조상을 정한다. 그 아래 자손에 적용할 스타일은 @container 조건으로 고른다. 넓은 곳에서는 이미지와 글을 가로로, 좁은 곳에서는 세로로 놓는다. 한 브라우저 창에서 두 카드가 서로 다른 배치를 쓸 수 있다. 사이트가 카드를 어디에 둘지 정하고, 브라우저는 각각의 위치에서 길이를 잰다.

그 측정에는 경계가 있어야 한다. 부모 상자의 폭이 자식의 배열에 따라 정해지고 자식의 배열은 다시 부모의 폭을 물어 결정된다면 계산이 빙빙 돈다. W3C의 2021년 CSS 설계 시연은 쿼리 컨테이너를 정의하고 필요하면 내용에 따라 크기가 바뀌는 관계를 끊는 이유를 설명했다. 그래야 부모의 치수가 자손의 스타일을 판단할 믿을 만한 입력이 된다.

2022년 8월 18일 작업 초안에는 본문 영역과 옆 칸에 놓인 미디어 구성 요소가 등장한다. 컨테이너 크기에 따라 가로 배열과 세로 배열을 바꾸는 예다. container-type: inline-size는 줄 방향 크기 쿼리에 적합한 조상을 만든다. 이름을 붙이면 @container가 원하는 조상을 찾을 수 있다. 조건은 그 컨테이너의 자손에 작동하므로, 카드가 실제로 놓인 자리에서 결정이 내려진다.

cqw와 cqi 같은 상대 단위는 길이를 컨테이너의 폭이나 줄 방향 크기에 연결한다. 세부 간격이나 크기도 카드가 들어간 칸에 맞춰 바뀔 수 있다. W3C CSS 작업반의 2022년 발표는 줄 방향 크기 경계, 상대 단위, 조건 규칙을 이번 초안의 주요 요소로 묶었다.

용어와 문법은 두 판 사이에서 손질됐다. 2021년 문서는 block-size, state 같은 실험적 유형도 다뤘다. 2022년 문서는 한 축의 block-size 선택지를 빼고 초기값과 축약 문법을 바꿨다. W3C 발행 기록에 두 날짜가 남아 있다. 구성 요소가 자기 주변 공간에 맞춰 움직인다는 목표를 실제 CSS 규칙으로 다듬는 과정이었다.

옆 칸은 여전히 좁다. 달라진 것은 카드가 그 사실을 알 수 있게 됐다는 점이다. CSS는 이제 창 전체를 보고 막연히 넓다고 말하는 대신, 카드 앞에 놓인 자리를 재고 옷을 고른다.