container-type i container-name

Zapytania kontenera pozwalają CSS stosować style na podstawie rozmiaru kontenera nadrzędnego, a nie obszaru roboczego. Umożliwia to tworzenie prawdziwie komponentowych responsywnych interfejsów, w których komponent dostosowuje się do miejsca, w którym został umieszczony.

W przypadku zapytań medialnych komponent karty umieszczony na pasku bocznym o szerokości 300px nie wie, że ma mało miejsca — wie tylko, że obszar roboczy jest szeroki. Zapytania kontenera pozwalają komponentowi reagować na rozmiar własnego kontenera, a nie globalnego obszaru roboczego.

Aby odpytywać kontener, należy najpierw zadeklarować go jako kontener zapytań za pomocą container-type:

Dostępne wartości:

• inline-size — umożliwia zapytania dotyczące wymiaru liniowego kontenera (szerokości w poziomym sposobie pisania)
• size — umożliwia zapytania dotyczące wymiaru liniowego i blokowego (szerokości i wysokości)
• normal — wartość domyślna; nie umożliwia zapytań dotyczących rozmiaru, ale nadal pozwala na zapytania dotyczące stylu

Kontenerowi można nadać nazwę, aby odwoływać się do niego w zapytaniach. Jest to konieczne, gdy istnieją zagnieżdżone kontenery i chcą Państwo odpytywać konkretny element nadrzędny:

Skrócona właściwość container ustawia zarówno nazwę, jak i typ:

Nienazwany kontener nadal można odpytywać — reguła @container domyślnie odnosi się do najbliższego przodka będącego kontenerem. Nazwy są potrzebne tylko wtedy, gdy chcą Państwo pominąć przodków i odwołać się do konkretnego z nich.

Każdy element z właściwością container-type otrzymuje własne ograniczenie układu. Oznacza to, że zmiany rozmiaru wewnątrz kontenera nie wpływają na elementy nadrzędne — jest to korzystne dla wydajności. Przeglądarka nie musi ponownie obliczać całej strony po zmianie rozmiaru kontenera.

Ustawienie container-type: inline-size niejawnie ustawia na elemencie contain: inline-size layout style. Zapobiega to wpływaniu rozmiaru kontenera na jego własny układ — jest to wymagane, aby zapytania dotyczące rozmiaru działały.

Kompletna konfiguracja zapytania kontenera:

Kontenerów należy używać do: dostosowywania na poziomie komponentu, wielokrotnego używania komponentów w różnych kontekstach układu oraz kart i widżetów umieszczanych w nieznanych miejscach. Zapytań medialnych należy używać do: globalnych zmian układu, skalowania typografii oraz wyświetlania i ukrywania dużych sekcji.

Jaka wartość właściwości sprawia, że element można odpytywać o szerokość za pomocą reguł @container?

container-type: inline-size definiuje element jako kontener zapytań dotyczących jego szerokości. Właściwości container-name należy używać do nadawania kontenerom nazw i wybierania konkretnych z nich. Skrócona właściwość container ustawia obie wartości. Zapytania kontenera rozwiązują problem komponentów umieszczanych w nieznanym kontekście, z którym nie radzą sobie zapytania medialne dotyczące obszaru roboczego.