CodeWorlds
Właściwość CSSUkład i pozycjonowanie

container-type

Zamienia element w kontener, o którego rozmiar mogą pytać reguły @container. Obejmuje też container-name i skrót container.

Wartość domyślna
normal
Dziedziczona
Nie
Animowalna
nie
Dotyczy
wszystkie elementy
JavaScript
element.style.containerType = "inline-size"
Na tej stronie

Przykład

#
CSS
.widget {
  container: stat / inline-size;
}

.widget .chart {
  display: none;
}

@container stat (width >= 260px) {
  .widget .chart {
    display: flex;
  }
}
Podgląd

Oba widżety mają ten sam kod. Wykres pojawia się tylko w kontenerze, który ma co najmniej 260px szerokości, więc wąska kolumna pokazuje samą liczbę.

Definicja i zastosowanie

#

Właściwość container-type oznacza element jako kontener dla zapytań @container. Bez niej reguły @container nie mają czego mierzyć i po prostu się nie włączają. Najczęściej używa się wartości inline-size: kontener udostępnia wtedy swój rozmiar liniowy, czyli w poziomym tekście szerokość, a komponenty w środku mogą się do niego dopasować.

Ta wygoda ma swoją cenę. Rozmiar, o który można pytać, nie może zależeć od treści, bo inaczej style i rozmiar goniłyby się w kółko. Przy inline-size szerokość kontenera przestaje więc wynikać z zawartości: element, który normalnie dopasowałby się do treści, na przykład inline-block albo float bez podanej szerokości, może skurczyć się do zera. Przy size dotyczy to obu wymiarów, więc wysokość trzeba podać samodzielnie.

Właściwość container-name nadaje kontenerowi nazwę, a nawet kilka nazw rozdzielonych spacjami. Zapytanie @container nazwa (…) trafia wtedy do najbliższego przodka o tej nazwie, a zapytanie bez nazwy do najbliższego przodka, który jest kontenerem. Skrót container: nazwa / typ ustawia obie właściwości naraz, na przykład container: sidebar / inline-size.

Same zapytania, jednostki cqi i gotowe wzorce komponentów opisuje hasło @container. Tutaj skupiamy się na tym, jak kontener zdefiniować i czego się po nim spodziewać.

Składnia

#
Składnia
container-type: normal | size | inline-size;
container-name: none | <nazwa>+;
container: <nazwa> [ / <typ> ]?;

Wartości

#

  • normal

    Element nie jest kontenerem dla zapytań o rozmiar. Reguła @container (width >= 260px) z demo nie ma do czego się odnieść, więc karta zostaje pionowa nawet w szerokiej ramce. To wartość domyślna.

  • inline-size

    Ramka udostępnia swoją szerokość i od 260px karta układa się poziomo. Przeciągnij prawy dolny róg ramki w lewo, a karta wróci do układu pionowego.

  • size

    Kontener udostępnia szerokość i wysokość, ale jego wysokość przestaje wynikać z treści. Bez podanej wysokości ramka zapada się do samego paddingu, a karta znika pod overflow: hidden.

  • size + height

    z podaną wysokością

    Z ustaloną wysokością kontener typu size działa poprawnie, a zapytania mogą sprawdzać także height. Zmniejsz ramkę w pionie, przeciągając jej róg, a obrazek zniknie.

  • container: lesson / inline-size

    skrót: nazwa / typ

    Skrót nadaje nazwę i typ naraz. Reguła @container lesson trafia tylko do kontenera o nazwie lesson i tu dodatkowo zmienia tło karty.

Wartości w praktyce

#

normal

Element nie jest kontenerem dla zapytań o rozmiar. Reguła @container (width >= 260px) z demo nie ma do czego się odnieść, więc karta zostaje pionowa nawet w szerokiej ramce. To wartość domyślna.
.demo { container-type: normal; }

inline-size

Ramka udostępnia swoją szerokość i od 260px karta układa się poziomo. Przeciągnij prawy dolny róg ramki w lewo, a karta wróci do układu pionowego.
.demo { container-type: inline-size; }

size

Kontener udostępnia szerokość i wysokość, ale jego wysokość przestaje wynikać z treści. Bez podanej wysokości ramka zapada się do samego paddingu, a karta znika pod overflow: hidden.
.demo { container-type: size; }

size + height

Z ustaloną wysokością kontener typu size działa poprawnie, a zapytania mogą sprawdzać także height. Zmniejsz ramkę w pionie, przeciągając jej róg, a obrazek zniknie.
.demo { container-type: size; height: 150px; resize: both; }

@container (height < 110px) {
  .thumb { display: none; }
}

container: lesson / inline-size

Skrót nadaje nazwę i typ naraz. Reguła @container lesson trafia tylko do kontenera o nazwie lesson i tu dodatkowo zmienia tło karty.
.demo { container: lesson / inline-size; }

@container lesson (width >= 260px) {
  .card { background: #1e1b4b; }
}

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 opakowanie komponentu, na przykład kolumnę siatki albo slot w układzie, a nie sam komponent. Reguły @container stylizują tylko potomków kontenera.
  • W zdecydowanej większości przypadków wybieraj inline-size. Typ size ma sens tylko wtedy, gdy wysokość kontenera i tak jest ustalona, na przykład w panelu o stałej wysokości.
  • Nazwy nadawaj według roli (sidebar, main, card). Przy zagnieżdżonych kontenerach zapytanie nie trafi wtedy do niewłaściwego przodka.

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