CSS @container regel

Definitie en gebruik

CSS @container Regels worden gebruikt om stijlen voor andere elementen te definiëren op basis van de grootte of stijl van de container.

Stijlverklaringen worden gefilterd op basis van de voorwaarden, en worden toegepast als de voorwaarden waar zijn. Als de grootte of stijlwaarde van de container verandert, wordt de voorwaarde opnieuw geëvalueerd.

Tip:In CSS is een container een element dat andere elementen omhult, gebruikt om ze te groeperen voor stijltoepassing.

Voorbeeld

Definieer stijlen voor andere elementen op basis van de grootte of stijl van de container:

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* Voeg stijlen toe als myContainer minder dan 500px breed is */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solide maroon;
    background-color: salmon;
  }
}

Probeer het zelf uit

CSS syntaxis

@container containername (containerquery) {
  css declarations
}

Eigenschapswaarde

Browserondersteuning

De cijfers in de tabel vertegenwoordigen de browserversie die de @ regel volledig ondersteunt.