CodeWorlds
Reguła CSSReguły @

@container

Nakłada style zależnie od rozmiaru kontenera, a nie całego okna. Komponent dopasowuje się do miejsca, które dostał w układzie.

Na tej stronie

Przykład

#
CSS
.slot {
  container-type: inline-size;
}

.card {
  display: grid;
  gap: 10px;
}

@container (width >= 240px) {
  .card {
    grid-template-columns: 96px 1fr;
    align-items: center;
  }
}
Podgląd

Obie karty mają ten sam HTML i te same style. Lewa kolumna ma 180 px, więc karta jest pionowa, a prawa ma ponad 240 px i karta układa się poziomo. Na telefonie prawa kolumna spada pod lewą, ale nadal jest dość szeroka na układ poziomy.

Definicja i zastosowanie

#

Reguła @container działa jak @media, ale zamiast szerokości okna sprawdza rozmiar wybranego przodka, czyli kontenera. Dzięki temu ta sama karta może być pionowa w wąskiej kolumnie bocznej i pozioma w szerokiej treści głównej. Komponent przenosisz w inne miejsce strony, a on sam dopasowuje się do dostępnej przestrzeni.

Najpierw trzeba wskazać kontener. Właściwość container-type: inline-size każe przeglądarce śledzić jego szerokość, a container-type: size także wysokość. Opcjonalna container-name nadaje mu nazwę, a skrót container: karta / inline-size ustawia nazwę i typ naraz. Zapytanie @container (width >= 400px) trafia do najbliższego przodka, który jest kontenerem, a @container karta (width >= 400px) do najbliższego o tej nazwie.

Reguły z @container działają tylko na potomków kontenera, nigdy na niego samego, bo rozmiar kontenera nie może zależeć od stylów, które od tego rozmiaru zależą. Z tego samego powodu szerokość kontenera przestaje wynikać z treści: element dopasowany do zawartości, np. inline-block albo float, może się skurczyć do zera. Przy container-type: size musisz też sam podać wysokość.

W środku kontenera działają jednostki zapytań: cqi to 1% szerokości kontenera, cqb 1% jego wysokości, a cqmin i cqmax odpowiednio mniejszy i większy z tych wymiarów. Nagłówek z font-size: clamp(1rem, 6cqi, 2rem) rośnie razem z kartą, a nie z oknem.

Składnia

#
Składnia
.rodzic { container-type: inline-size; container-name: <nazwa>; }

@container <nazwa>? (<warunek rozmiaru>) {
  selektor { właściwość: wartość; }
}

Warianty zapytań

#

  • (width >= 240px)

    kontener ma co najmniej 240 px

    Gdy kontener ma co najmniej 240 px szerokości, obrazek staje obok tekstu. Przeciągnij prawy dolny róg ramki w lewo, a karta wróci do układu pionowego.

  • (width < 200px)

    kontener węższy niż 200 px

    W bardzo wąskim kontenerze znika opis, a tytuł się zmniejsza. Zwęż ramkę poniżej 200 px, przeciągając jej prawy dolny róg, żeby to zobaczyć.

  • lesson (width >= 240px)

    najbliższy kontener o nazwie lesson

    Zapytanie z nazwą pomija kontenery o innych nazwach i szuka najbliższego przodka o nazwie lesson. Przydaje się, gdy kontenery są zagnieżdżone, a Ty chcesz pytać o konkretny, np. o kolumnę strony.

  • cqi

    1% szerokości kontenera

    Jednostka zapytań o kontener. Tytuł ma 7% szerokości kontenera, więc rośnie i maleje razem z ramką, a clamp() trzyma go w rozsądnych granicach. Przeciągnij róg ramki i obserwuj napis.

Warianty zapytań w praktyce

#

(width >= 240px)

Gdy kontener ma co najmniej 240 px szerokości, obrazek staje obok tekstu. Przeciągnij prawy dolny róg ramki w lewo, a karta wróci do układu pionowego.
@container (width >= 240px) {
  .card {
    grid-template-columns: 72px 1fr;
    align-items: center;
  }
}

(width < 200px)

W bardzo wąskim kontenerze znika opis, a tytuł się zmniejsza. Zwęż ramkę poniżej 200 px, przeciągając jej prawy dolny róg, żeby to zobaczyć.
@container (width < 200px) {
  .meta { display: none; }
  .title { font-size: 14px; }
}

lesson (width >= 240px)

Zapytanie z nazwą pomija kontenery o innych nazwach i szuka najbliższego przodka o nazwie lesson. Przydaje się, gdy kontenery są zagnieżdżone, a Ty chcesz pytać o konkretny, np. o kolumnę strony.
.demo { container-name: lesson; }

@container lesson (width >= 240px) {
  .card {
    grid-template-columns: 72px 1fr;
    align-items: center;
    background: #1e1b4b;
  }
}

cqi

Jednostka zapytań o kontener. Tytuł ma 7% szerokości kontenera, więc rośnie i maleje razem z ramką, a clamp() trzyma go w rozsądnych granicach. Przeciągnij róg ramki i obserwuj napis.
.title {
  font-size: clamp(14px, 7cqi, 26px);
}

Więcej przykładów

#
Nazwany kontener i nagłówek w jednostkach cqi
CSS
.hero {
  container: hero / inline-size;
}

.hero h2 {
  font-size: clamp(1.1rem, 7cqi, 2.2rem);
}

@container hero (width < 320px) {
  .hero .actions {
    flex-direction: column;
  }
}
Podgląd

Przeciągnij prawy dolny róg ramki. Nagłówek skaluje się jednostką cqi, a gdy kontener zrobi się węższy niż 320 px, przyciski ustawią się jeden pod drugim.

Obsługa przeglądarek

#

Szeroko dostępne · od 2023 roku

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

  • Chrome
  • Edge
  • Firefox
  • Safari

Dobre praktyki

#
  • Kontenerem rób element, którego szerokość wynika z układu: kolumnę siatki, sekcję albo slot na komponent. Samej karty zwykle nie oznaczaj jako kontenera, tylko jej opakowanie.
  • Reguła @container stylizuje tylko potomków. Jeśli chcesz zmienić wygląd samego kontenera, dodaj w środku element opakowujący i to jemu nadaj style.
  • Podział ról jest prosty: @media do decyzji o całej stronie, np. układu kolumn i nawigacji, a @container do komponentów używanych w różnych miejscach.

Powiązane hasła

#

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs
Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie
Polityka Prywatności
OK