Acabei de fazer um teste rápido e confirmo que as consultas de contêiner funcionam em temas… uma coisa que observarei é que elas são muito mais difíceis de raciocinar do que as media queries. Alguns de nós na equipe ficaram confusos com isso inicialmente.
Elas não são simplesmente media queries em contêineres, mas têm um conjunto separado de requisitos. O maior problema é:
A contenção de tamanho desliga a capacidade de um elemento obter informações de tamanho de seu conteúdo, o que é importante para as consultas de contêiner para evitar loops infinitos.
Portanto, você não pode usar uma consulta de contêiner com um contêiner que tenha uma largura dinâmica. Você deve definir uma largura estática no contêiner. Isso limita significativamente o que você esperaria ser capaz de fazer com elas, infelizmente.
Aqui está uma prova de conceito realmente boba que mostra que elas funcionam
@media screen and (min-width: 500px) {
.fk-d-button-tooltip {
width: 300px;
background: green;
container-type: inline-size;
}
}
@media screen and (min-width: 1000px) {
.fk-d-button-tooltip {
width: 500px;
background: yellow;
container-type: inline-size;
}
}
@container (min-width: 400px) {
#create-topic {
background: blue !important;
}
}
Contêiner com menos de 400px:
Contêiner com mais de 400px:
