먼저 컨테이너를 등록하고 쿼리할 수 있어야 합니다.

컨테이너 등록

선택기를 사용하여 컨테이너를 등록합니다.

.parent {
    container-name: myname;
    container-type: inline-size;
    ... other code
}

또는 단축 옵션을 사용하세요.

.parent {
    container: myname / inline-size;
    ... other code
}

등록 시 유형과 이름이라는 두 가지 세부 사항을 지정해야 합니다.

컨테이너 유형

컨테이너 유형: ...

• 크기
• 인라인 크기
• 정상

컨테이너 이름

컨테이너 이름: ;

은 여러 컨테이너로 구성된 시나리오에서 특히 유용한 컨테이너를 식별합니다.

컨테이너 쿼리

컨테이너 쿼리는 @container at-규칙으로 시작하고 그 뒤에 컨테이너 이름과 기능 쿼리가 옵니다.

div {
    font-size: 2em;
}

@container myname (width: > 30ch)
{
    div {
        font-size: 3em;
    }
}

기능 너비가 30ch보다 큰 경우 myname 컨테이너 내부 div의 글꼴 크기를 3em으로 설정하는 컨테이너 쿼리입니다.

쿼리할 기능

크기 쿼리...

• 너비
• 키
• 인라인 크기
• 블록 크기
• 가로세로 비율
• 정위

스타일 쿼리...

• 스타일(속성: 값)

값을 확인할 속성입니다.

예:

@container contname style('background-color: blue') {
    ... 
    styles 
    ...
}

컨테이너 contname의 배경색이 파란색인 경우 스타일을 적용하는 컨테이너 쿼리

복합 쿼리

and, or 및 not을 사용하여 복합 쿼리를 생성할 수 있습니다.

예:

    @container myname (width>30ch) and (height>100px) {
        ...
    }

    @container myname not (color: blue) {
        ...
    }

중첩된 컨테이너 쿼리

컨테이너 쿼리는 다른 컨테이너 쿼리 내에 중첩될 수 있습니다.

예:

    @container myname (width>30ch) {
        ...
        @container myname (background-color: blue) {
            ...
        }
        @container myname (background-color: red) {
            ...
        }
    }