Regola @container CSS

definizione e uso

CSS @container Le regole vengono utilizzate per definire stili per altri elementi in base alla dimensione o allo stile del contenitore.

Le dichiarazioni di stile vengono filtrate in base alle condizioni. Se la condizione è vera, vengono applicate al contenitore. Quando la dimensione o il valore dello stile del contenitore cambia, la condizione viene rievaluata.

suggerimento:In CSS, il contenitore è un elemento che avvolge altri elementi, utilizzato per raggrupparli per impostare stili.

esempio

Definisci stili per altri elementi in base alla dimensione o allo stile del contenitore:

.madre {
  nome-del-contenitore: myContainer;
  tipo-di-contenitore: dimensione-inline;
}
/* Aggiungi stili se myContainer è più piccolo di 500px di larghezza */
@container myContainer (larghezza < 500px) {
  .figlio {
    larghezza: 50%;
    bordo: 2px solid maroon;
    colore-di-sfondo: salmone;
  }
}

Prova te stesso

sintassi CSS

@container containername (containerquery) {
  declarazioni CSS
}

valore-dell'attributo

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la regola @.