쿼리 정의

재사용할 조건에 한 번 이름을 붙이고 네이티브 CSS나 클래스 접미사에서 사용합니다. 미디어 이름은 뷰포트나 기기 조건을, 컨테이너 이름은 사용 위치에서 선택한 컨테이너에 대해 검사할 조건을 나타냅니다. 정의는 최상위이며 무조건적이어야 합니다.

클래스 접미사 구문은 조건, 모든 프리셋 조건은 명명된 조건, 레이아웃 경계 선택은 반응형 디자인을 참고하세요.

정의는 조건을 저장합니다. 사용 위치가 컨테이너 이름 card를 제공합니다. --dense 확장은 너비 검사와 스타일 검사를 모두 유지합니다.

텍스트 설명

1. --md는 너비 조건 (width >= 28rem)을 정의합니다. --dense는 해당 참조와 style(--density: compact)를 결합합니다.
2. 사용 위치 @container card (--dense)가 card라는 컨테이너를 선택합니다.
3. 확장 결과는 @container card (width >= 28rem) and style(--density: compact)입니다. 컨테이너 이름은 바뀌거나 정의의 일부가 되지 않습니다.
4. 같은 조건은 다른 컨테이너 이름이나 가장 가까운 적격 컨테이너와 재사용할 수 있습니다. 그림은 컴파일 시 치환이며 DOM 트리가 아닙니다.

@custom-media

CSS Media Queries 명세에 따라 명명된 미디어 쿼리를 정의합니다.

@custom-media --wide (width >= 60rem);@custom-media --reading (--wide), print;@custom-media --outside not (--reading);@custom-media --enabled true;@custom-media --disabled false;@media (--reading) {  .article {    max-width: 70ch;  }}

이름은 --로 시작합니다. CSS 참조는 (--name), 마크업은 @name, 로컬 명명 블록은 @media (--name)을 사용합니다. 네이티브 CSS, 유틸리티와 믹스인 정의, 마크업 쿼리는 같은 레지스트리를 사용합니다.

정의는 쿼리 목록, 전방 참조, true, false, 중첩 불리언 식, 부정, 미디어 타입을 지원합니다. 확장은 논리적으로 동작합니다. 목록의 논리합을 유지하며 부정은 참조한 전체 식에 적용됩니다. 목록의 각 쿼리는 별도 분기가 되고 클래스의 모든 조건 분기 수는 곱해집니다. @reading을 열두 번 반복하는 경우처럼 4,096개 분기를 초과하는 클래스는 규칙을 생성하지 않습니다. 컴파일러는 일반 미디어 쿼리를 출력하며 혼합 미디어 타입을 단일 쿼리로 표현할 수 없으면 중첩 블록을 사용합니다. 브라우저 custom-media API나 JavaScript 런타임 등록은 필요하지 않습니다.

정의되지 않거나 순환하거나 유효하지 않은 참조는 컴파일 오류입니다. 같은 이름은 뒤의 정의가 우선합니다. 미디어와 믹스인 이름은 독립적입니다. @name은 미디어를 선택하고 @apply(--name)은 믹스인을 호출합니다. @starting-style이 내장되어 있으므로 --starting-style은 예약어입니다. 프리셋에는 --breakpoint-* 토큰이 없습니다. 이 접두사를 가진 프로젝트 사용자 지정 속성은 일반 CSS로 남으며 미디어 조건을 암묵적으로 선언하지 않습니다. 너비 상한에는 네이티브 길이나 별도로 명명한 레이아웃 토큰을 사용하세요. 외부 URL을 유지하는 가져오기는 해석되지 않은 custom-media 쿼리를 포함할 수 없습니다. 변환 전에 해당 스타일시트 가져오기를 해석하거나 가져오기에 일반 네이티브 쿼리를 사용하세요.

@custom-media --card (width >= 40rem); .card { @media (--card) { display: grid; } }

.card {  @media (width >= 40rem) {    display: grid;  }}

@custom-container

Master CSS는 컴파일 시 @custom-container 정의를 확장하며 브라우저는 일반 @container 규칙을 받습니다. 정의는 조건만 담고 측정할 컨테이너는 조건을 사용하는 위치에서 선택합니다.

@custom-container --md (width >=28rem);@custom-container --max-md not (--md);@custom-container --compact style(--density: compact);@custom-container --dense (--md) and (--compact);@container card (--md) {  .title {    font-size: 1.25rem;  }}

이름은 --로 시작합니다. CSS 참조는 선택적인 컨테이너 이름 뒤에 (--name)을 사용하며 예로 @container card not (--md)가 있습니다. 마크업도 컨테이너 쿼리 안에서 같은 참조를 사용합니다. @container(--md)는 가장 가까운 컨테이너를, @container(card|--md)는 명명된 컨테이너를 측정합니다. 네이티브 CSS, 유틸리티와 믹스인 정의, 마크업은 같은 레지스트리를 공유합니다.

정의는 크기와 스타일 쿼리, not, and, or, 전방 참조를 포함한 다른 사용자 정의 컨테이너 참조 등 모든 컨테이너 조건이 될 수 있습니다. 확장은 참조 조건을 치환하며 이미 하나의 그룹이거나 전체 조건이 아니면 괄호로 감쌉니다. 따라서 @container card (--dense)는 @container card (width >= 28rem) and style(--density: compact)를 출력합니다. 컨테이너 조건은 항상 하나의 전치부에 들어가며 확장은 분기를 추가하지 않습니다. 컴파일러는 일반 컨테이너 쿼리를 출력하고 각 확장 조건을 manifest의 customContainers에 저장합니다.

정의되지 않거나 순환하거나 빈 참조, 컨테이너 이름으로 시작하는 정의는 컴파일 오류입니다. 같은 이름은 뒤의 정의가 우선하며 이를 참조하는 정의도 최종 버전을 사용합니다. 컨테이너 이름은 사용자 정의 미디어 및 믹스인과 독립적입니다. 단독 @md는 항상 사용자 정의 미디어를 선택하며 컨테이너 조건을 선택하지 않습니다. --container-* 토큰은 요소 크기를 정하며 컨테이너 임계값을 제공하지 않습니다.

@custom-container --roomy (width >= 40rem); .card { @container (--roomy) { display: grid; } }

.card {  @container (width >= 40rem) {    display: grid;  }}