CSS @container regeln

Definition och användning

CSS @container Regeln används för att definiera stilar för andra element baserat på behållarens storlek eller stil.

Styldeklarationer filtreras baserat på villkor, om villkoret är sant tillämpas de på behållaren. När behållarens storlek eller stilvärde ändras, revideras villkoret om igen.

Tips:I CSS är en behållare en element som innehåller andra element, används för att gruppera dem för att tillämpa stilar.

Exempel

Definiera stilar för andra element baserat på behållarens storlek eller stil:

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* Lägg till stilar om myContainer är mindre än 500px bred */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solid maroon;
    background-color: salmon;
  }
}

Prova själv

CSS-syntax

@container containername (containerquery) {
  css-uttryck
}

Attributvärde

Värde Beskrivning
containername valfri. Namnet på behållaren.
containerquery

obligatorisk. Värde på villkoret att bedöma. Om villkoret är sant, tillämpa stilen.

kan användas i containerquery Använd följande deskriptorer:

  • aspect-ratio
  • block-size
  • height
  • inline-size
  • orientation
  • width

Webbläsarstöd

Talen i tabellen representerar den första webbläsarversion som helt stöder denna @ regel.

Chrome Edge Firefox Safari Opera
105 105 110 16 91