이름이 있는 조건

프리셋은 독립적인 미디어 조건과 컨테이너 조건을 정의합니다. 짧은 이름을 공유하지만 두 등록 목록 모두 테마 토큰 집합은 아닙니다. 단독 @md는 뷰포트를 쿼리하고 @container(--md)는 자격을 갖춘 상위 컨테이너를 쿼리합니다.

미디어 조건

미디어 이름은 media.css에서 가져옵니다. 너비 조건은 작성된 rem 값을 사용하고 방향 및 환경설정 조건은 네이티브 미디어 기능을 사용합니다. @dark와 @light는 수동으로 고른 사이트 테마가 아니라 시스템 환경설정을 확인합니다.

최소 뷰포트 너비

지정 너비 미만의 뷰포트

방향과 환경설정

컨테이너 조건

컨테이너 이름은 container.css에서 가져옵니다. 정의는 쿼리 조건만 제공합니다. @container(--md)는 가장 가까운 적격 컨테이너를 사용하고 @container(card|--md)는 이름이 card인 적격 컨테이너를 선택합니다. 두 형식 모두 컨테이너를 만들지 않습니다.

최소 컨테이너 너비

지정 너비 미만의 컨테이너

각 프리셋 max- 조건은 대응하는 최소 조건의 여집합입니다. 아래 확장 쿼리는 경계에서 겹치지 않습니다. 원본 정의는 not (--name)으로 대응하는 이름을 참조합니다.

같은 이름, 다른 범위

같은 키가 서로 다른 쿼리 영역에서 다른 임계값을 나타낼 수 있습니다. --container-md 같은 컨테이너 크기 토큰은 세 번째 독립 역할로, 크기 유틸리티에 길이를 제공합니다.

프리셋 @md 임계값은 64rem이고 @container(--md)는 28rem입니다. 둘 다 md라는 이름을 쓰지만 이 독립적인 정의들은 서로 다른 경계를 쿼리합니다.

텍스트 설명

1. 바깥 경계는 프리셋 @md 최소 너비인 64rem의 뷰포트를 나타냅니다.
2. 안쪽 경계는 독립적인 @container(--md) 최소 너비인 28rem의 쿼리 컨테이너를 나타냅니다. 쿼리 대상 요소는 이 컨테이너 안에 있습니다.
3. 두 너비는 같은 척도로 그렸으며 초기 글꼴 크기와 루트 글꼴 크기는 모두 16px입니다. 컨테이너 크기 토큰을 바꿔도 두 조건 정의는 바뀌지 않습니다.

사용 예

이 레이아웃은 프리셋 md 뷰포트 임계값 미만에서 한 열을 사용하고 임계값부터 세 열을 사용합니다.

<div class="… grid-cols(1) grid-cols(3)@md">  <div>Notes</div>  <div>Drafts</div>  <div>Archive</div></div>

@layer utilities {  .grid-cols\(1\) {    display: grid;    grid-template-columns: repeat(1, minmax(0, 1fr))  }  @media (width >= 64rem) {    .grid-cols\(3\)\@md {      display: grid;      grid-template-columns: repeat(3, minmax(0, 1fr))    }  }}

사용자 정의

뷰포트나 환경설정 쿼리에는 사용자 지정 미디어 이름을, 컴포넌트 쿼리에는 사용자 지정 컨테이너 이름을 선언하세요. 네이티브 단위는 유지됩니다. 이미 컴파일된 manifest에서 조건을 대체할 때 두 임계값을 모두 바꾸려면 상보 조건도 다시 선언하세요.

@custom-media --tablet (width >= 48rem);@custom-container --wide-card (width >= 30rem);

<aside class="(container-name:card) container-inline">  <div class="grid-cols(1) grid-cols(2)@container(card|--wide-card)">Card content</div></aside><div class="grid-cols(1) grid-cols(3)@tablet">Page content</div>

@layer utilities {  .grid-cols\(1\) {    display: grid;    grid-template-columns: repeat(1, minmax(0, 1fr))  }  .container-inline {    container-type: inline-size  }  .\(container-name\:card\) {    container-name: card  }  @container card (width >= 30rem) {    .grid-cols\(2\)\@container\(card\|--wide-card\) {      display: grid;      grid-template-columns: repeat(2, minmax(0, 1fr))    }  }  @media (width >= 48rem) {    .grid-cols\(3\)\@tablet {      display: grid;      grid-template-columns: repeat(3, minmax(0, 1fr))    }  }}

관련 문서: 조건 문법, 조건 정의 범위, 쿼리 정의, 컨테이너 크기 토큰 , 반응형 디자인.