Laboratorium zapytań kontenerów iShadeed

Ahmad Shadeed uzyskał wczesny skok w zapytaniach dotyczących kontenerów i ma rosnący zbiór przykładów oparty na codziennych wzorach.

A jeśli to przegapiłeś, jego najnowszy post dotyczący zapytań dotyczących kontenerów wykonuje świetną robotę obejmującą, jak działają od czasu wejścia na Chrome 105 w tym miesiącu (zobaczymy je wkrótce w Safari 16). Niektóre najważniejsze informacje i dania na wynos:

• Kontenery są zdefiniowane za pomocą container-type własność. Poprzednie dema i propozycje korzystały contain zamiast.
• Zapytania kontenerowe są bardzo podobne do zapytań o media, które pisaliśmy przez cały czas, aby kierować na rozmiar widocznego obszaru. Więc zamiast czegoś takiego @media (min-width: 600px) {}, mamy @container (min-width: 600px) {}. Powinno to sprawić, że konwersja wielu z tych zapytań o media na zapytania kontenerowe będzie dość prosta, bez pracy nad ustaleniem nowych wartości punktów przerwania.
• Możemy nazwać kontenery, aby pomóc je odróżnić w naszym kodzie (np container-name: blockquote).

Świetna robota, Ahmadzie! I dzięki za udostępnienie!

Bezpośrednie łącze →