Primeiro um contêiner deve ser registrado e pode ser consultado.

Registrar um contêiner

Use um seletor para registrar um contêiner.

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

ou use a opção abreviada

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

No momento da inscrição, dois dados - tipo e nome - devem ser especificados.

Tipo de contêiner

tipo de contêiner: ...

• tamanho
• tamanho embutido
• normal

Nome do contêiner

nome do contêiner: ;

identifica o contêiner especialmente útil se você tiver um cenário de vários contêineres.

Consultar um contêiner

A consulta do contêiner começa com a regra @container seguida pelo nome do contêiner e pela consulta do recurso.

div {
    font-size: 2em;
}

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

consulta de contêiner para definir o tamanho da fonte do div dentro do contêiner myname como 3em se a largura do recurso for maior que 30ch.

Recursos para consultar

consulta de tamanho...

• largura
• altura
• tamanho embutido
• tamanho do bloco
• proporção
• orientação

consulta de estilo...

• estilo(propriedade: valor)

propriedade a ser verificada quanto ao valor.

por exemplo

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

A consulta do contêiner para aplicar estilos se a cor de fundo do nome do contêiner for azul

Consultas compostas

e, ou e não pode ser usado para criar consultas compostas

por exemplo

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

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

Consultas de contêineres aninhados

As consultas de contêiner podem ser aninhadas em outras consultas de contêiner.

por exemplo

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