Primero se debe registrar un contenedor y se puede consultar.

Registrar un contenedor

Utilice un selector para registrar un contenedor.

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

o utilice la opción abreviada

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

En el momento del registro, se deben especificar dos detalles: tipo y nombre.

Tipo de contenedor

tipo-contenedor: ...

• tamaño
• tamaño en línea
• normal

Nombre del contenedor

nombre-contenedor: ;

identifica el contenedor, especialmente útil si se trata de un escenario de múltiples contenedores.

Consultar un contenedor

La consulta del contenedor comienza con la regla @container at seguida del nombre del contenedor y la consulta de función.

div {
    font-size: 2em;
}

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

consulta de contenedor para establecer el tamaño de fuente para el div dentro del contenedor myname en 3em si el ancho de la característica es mayor que 30 canales.

Funciones para consultar

consulta de tamaño...

• ancho
• altura
• tamaño en línea
• tamaño de bloque
• relación de aspecto
• orientación

consulta de estilo...

• estilo(propiedad: valor)

propiedad cuyo valor se verificará.

por ejemplo

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

La consulta del contenedor para aplicar estilos si el color de fondo del nombre del contenedor es azul

Consultas compuestas

y, o y no se pueden utilizar para crear consultas compuestas

por ejemplo

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

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

Consultas de contenedores anidados

Las consultas de contenedor se pueden anidar dentro de otras consultas de contenedor.

por ejemplo

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