Regra @container do CSS

definição e uso

CSS @container As regras são usadas para definir estilos para outros elementos com base no tamanho ou estilo do contêiner.

As declarações de estilo são filtradas com base na condição, e são aplicadas ao contêiner se a condição for verdadeira. A condição é reavaliada quando o tamanho ou o valor do estilo do contêiner muda.

Dica:Em CSS, um contêiner é um elemento que envolve outros elementos, usado para agrupá-los para configuração de estilo.

exemplo

Defina estilos para outros elementos com base no tamanho ou estilo do contêiner:

.parent {
  nome-do-contêiner: myContainer;
  tipo-de-contêiner: tamanho-embutido;
}
/* Adicione estilos se myContainer for menor que 500px de largura */
@container myContainer (largura < 500px) {
  .child {
    largura: 50%;
    borda: 2px sólida marrom;
    cor-de-fundo: salmão;
  }
}

Experimente você mesmo

Sintaxe CSS

@container containername (containerquery) {
  declarações CSS
}

valor do atributo

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente a regra @.