Reguła @container w CSS

definicja i użycie

CSS @container Reguły są używane do definiowania stylów dla innych elementów na podstawie rozmiaru lub stylu kontenera.

Deklaracje stylów są filtrowane na podstawie warunków, jeśli warunek jest prawdziwy, są zastosowane do kontenera. Warunek jest ponownie oceniany, gdy zmienia się rozmiar lub wartość stylu kontenera.

Wskazówka:W CSS, kontener to element otaczający inne elementy, używany do grupowania ich w celu ustawień stylu.

przykład

Definiuj style dla innych elementów na podstawie rozmiaru lub stylu kontenera:

.parent {
  container-name: myContainer;
  container-type: rozmiar-wewnętrzny;
}
/* Dodaj style, jeśli myContainer ma szerokość mniejszą niż 500px */
@container myContainer (szerokość < 500px) {
  .child {
    szerokość: 50%;
    border: 2px solid czerwonawość;
    background-color: krewetkowy;
  }
}

Spróbuj sam

gramatyka CSS

@container containername (containerquery) {
  deklaracje CSS
}

wartość-atrybutu

Obsługa przeglądarki

Liczby w tabeli oznaczają wersje przeglądarek, które w pełni obsługuje tę @ zasadę.