CSS @container regel

definition og brug

CSS @container Regler bruges til at definere stiler til andre elementer baseret på kontainerens størrelse eller stil.

Stiludtryk filtreres baseret på betingelserne, og anvendes, hvis betingelsen er sand. Når kontainerens størrelse eller stilværdi ændres, evalueres betingelsen igen.

Tip:I CSS er en kontainer et element, der indkapsler andre elementer, og bruges til at gruppere dem til stilindstillinger.

eksempel

Definer stiler til andre elementer baseret på kontainerens størrelse eller stil:

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* Tilføj stiler, hvis myContainer er mindre end 500px bred */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solid maroon;
    background-color: salmon;
  }
}

Prøv det selv

CSS-sprog

@container containername (containerquery) {
  css-udtryk
}

egenskabsværdi

Browser-understøttelse

Tallene i tabellen viser den første browserversion, der fuldt ud understøtter denne @ regel.