Reguły @container i punkty przerwania
Napisz reguły @container, które stosują style, gdy kontener osiąga określone wymiary.
Reguły @container i punkty przerwania to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Składnia reguły @container
@container to reguła at, która stosuje style, gdy kontener spełnia określone warunki dotyczące rozmiaru. Jej składnia przypomina składnię zapytań medialnych:
<div class="wrapper"><div class="box">Styled once container ≥ 400px wide</div></div>
Zapytania nazwanych kontenerów
Aby wybrać konkretny nazwany kontener:
<div class="sidebar">
<div class="nav-item">Dashboard</div>
<div class="nav-item">Settings</div>
</div>
Zapytania kontenera max-width
Proszę użyć max-width, aby zastosować style dla mniejszych kontenerów:
<div class="wrapper"><div class="card">Compact card at narrow widths</div></div>
Zakresowe zapytania kontenera
Nowoczesna składnia zapytań kontenera obsługuje zakresy:
<div class="wrapper"><div class="card"><span>Icon</span><span>Label</span></div></div>
Adaptacyjny komponent karty
Komponent karty, który dostosowuje się na podstawie szerokości kontenera:
<div class="card-wrapper">
<div class="card">
<div class="card__image"></div>
<div class="card__body">Adaptive card content</div>
</div>
</div>
Zagnieżdżone zapytania kontenera
Zapytania kontenera można zagnieżdżać. Wewnętrzne zapytanie domyślnie odwołuje się do najbliższego przodka będącego kontenerem.
<div class="outer">
<div class="inner">
<div class="content">Nested container-aware content</div>
</div>
</div>
Punkty przerwania zapytań kontenera
W przeciwieństwie do punktów przerwania viewportu, punkty przerwania kontenera należy wybierać na podstawie momentu, w którym układ komponentu musi się zmienić, a nie arbitralnych rozmiarów urządzeń. Proszę zacząć od minimalnej i maksymalnej szerokości treści komponentu.
Typografia w kontenerach
Proszę dostosować typografię do małych kontenerów:
<div class="wrapper">
<h3 class="card-title">Adaptive Heading</h3>
<p class="card-text">Body copy that hides on very narrow containers.</p>
</div>
Zapytanie kontenera dla układu siatki
Proszę zmieniać wewnętrzną siatkę komponentu w punktach przerwania kontenera:
<div class="widget">
<div class="widget-grid">
<div>Tile 1</div>
<div>Tile 2</div>
</div>
</div>
Zapytania stylu (nie tylko rozmiar)
Zapytania kontenera obsługują również zapytania stylu, które sprawdzają obliczone wartości niestandardowych właściwości. Dzięki temu można tworzyć warianty komponentów sterowane zmiennymi CSS bez dodatkowych klas:
<div class="wrapper"><div class="card">Featured card styled via style query</div></div>
Szybkie sprawdzenie
Do czego odnosi się @container (min-width: 500px)?
Podsumowanie
Reguły @container stosują style do elementów znajdujących się wewnątrz kontenera, gdy kontener spełnia warunki dotyczące rozmiaru. Nazwane kontenery umożliwiają kierowanie stylów do konkretnych przodków. Punkty przerwania kontenera należy opierać na potrzebach treści, a nie na rozmiarach urządzeń. Zapytania stylu rozszerzają zapytania kontenera o sprawdzanie wartości zmiennych CSS, umożliwiając tworzenie zaawansowanych, deklaratywnych wariantów komponentów.
Często zadawane pytania
Czy lekcja „Reguły @container i punkty przerwania” jest bezpłatna?
Tak — pełny tekst „Reguły @container i punkty przerwania” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Reguły @container i punkty przerwania”?
Napisz reguły @container, które stosują style, gdy kontener osiąga określone wymiary. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Reguły @container i punkty przerwania”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- container-type i container-name
- Reguły @container i punkty przerwania
- Jednostki zapytań kontenera: cqw cqh
- Zapytania kontenera a zapytania medialne