Mikroukłady

Mówiąc o układach, najczęściej mamy na myśli projekty na poziomie strony. Z kolei mniejsze komponenty strony mogą mieć własne, niezależne układy.

Najlepiej, gdyby układy na poziomie komponentu dostosowały się automatycznie, bez względu na ich pozycję na stronie. W niektórych sytuacjach nie wiadomo, czy komponent zostanie umieszczony w głównej kolumnie z treścią, na pasku bocznym lub w obu tych kolumnach. Nie mając pewności, dokąd trafią komponenty, musisz zadbać o to, by komponent dostosowywał się do swojego kontenera.

Układ z dwiema kolumnami – jeden szeroki, a drugi wąski. Obiekty multimedialne są ułożone w różny sposób w zależności od tego, czy znajdują się w szerokiej czy wąskiej kolumnie.

Siatka

Siatka CSS jest przeznaczona nie tylko dla układów na poziomie strony. Sprawdza się też w przypadku komponentów, które w nich funkcjonują.

W tym przykładzie funkcje ::before i ::after pseudoelementy tworzą dekoracyjne linie na z boku nagłówka. Sam nagłówek jest kontenerem siatki. Osoba fizyczna są rozmieszczone w taki sposób, że zawsze wypełniają dostępną przestrzeń.

h1 {
 
display: grid;
 
grid-template-columns: 1fr auto 1fr;
 
gap: 1em;
}
h1::before,
h1::after {
 
content: "";
 
border-top: 0.1em double black;
 
align-self: center;
}
Narzędzia dla programistów w Firefoksie przedstawiające nakładkę z siatką. Narzędzia dla programistów w Chrome przedstawiające nakładkę z siatką.
. Przeglądarki na komputerach, takie jak Firefox czy Chrome, mają narzędzia dla programistów, które pokazują linie siatki i obszary nałożone na projekt.

Dowiedz się, jak sprawdzać układy siatki w Narzędziach deweloperskich w Chrome.

Urządzenie Flexbox

Jak sama nazwa wskazuje, możesz użyć flexbox i elastycznym komponentom. Możesz zadeklarować, które elementy komponentu powinny mają minimalny lub maksymalny rozmiar, a pozostałe elementy dopasowują się do siebie odpowiednio się zmienia.

W tym przykładzie obraz zajmuje jedną czwartą dostępnego miejsca, tekst zajmuje pozostałe trzy czwarte. Obraz nigdy nie jest jednak większy niż 200 pikseli.

.media {
 
display: flex;
 
align-items: center;
 
gap: 1em;
}
.media-illustration {
 
flex: 1;
 
max-inline-size: 200px;
}
.media-content {
 
flex: 3;
}
Narzędzia dla programistów w Firefoksie z nakładką Flexbox. Narzędzia dla programistów w Chrome pokazujące nakładkę Flexbox.
. Narzędzia dla programistów w Firefoksie i Chrome pomagają zwizualizować kształt komponentów Flexbox.

Dowiedz się, jak sprawdzać układy Flexbox. w Narzędziach deweloperskich w Chrome.

Zapytania dotyczące kontenera

Flexbox umożliwia projektowanie od samego początku. Możesz podać parametry czyli jak wąskie powinny być i jak szerokie) przeglądarka musi opracować ostateczną implementację.

Sam komponent nie ma jednak świadomości swojego kontekstu. Nie wie, czy jest on używany w głównej treści czy na pasku bocznym. Dzięki temu układy komponentów są trudniejsze niż układy strony. Aby stosować style dopasowane do kontekstu, komponenty muszą wiedzieć więcej niż rozmiar widocznego obszaru, w którym się znajdują.

W przypadku układów stron poznasz szerokość kontenera, ponieważ kontenera to widoczny obszar przeglądarki; i zapytania o media raportują wymiary kontener na poziomie strony.

Aby raportować wymiary dowolnego kontenera, należy użyć funkcji zapytania dotyczące kontenerów.

Na początek określ, które elementy będą działać jako kontenery.

main,
aside
{
 
container-type: inline-size;
}

Oznacza to, że chcesz wysłać zapytanie dotyczące wymiaru wbudowanego. Dla języka angielskiego dokumentów – jest to oś pozioma. Zmienisz style na podstawie czyli szerokość kontenera.

Jeśli komponent znajduje się w jednym z tych kontenerów, możesz stosować style w podobny sposób podczas stosowania zapytań o multimedia.

.media-illustration {
 
max-width: 200px;
 
margin: auto;
}

@container (min-width: 25em) {
 
.media {
   
display: flex;
   
align-items: center;
   
gap: 1em;
 
}

 
.media-illustration {
   
flex: 1;
 
}

 
.media-content {
   
flex: 3;
 
}
}

Jeśli obiekt multimedialny znajduje się w kontenerze węższym niż 25em, Flexbox style nie są stosowane. Obraz i tekst zostaną uporządkowane w pionie.

Jeśli jednak element ten ma szerokość większą niż 25em, obraz i tekst zostaną wyświetlone obok siebie.

Za pomocą zapytań dotyczących kontenerów możesz stosować niezależne style komponentów. Możesz napisać reguł opartych na szerokości elementu, który je zawiera; to szerokość widoczny obszar nie ma już znaczenia.

2 kontenery o różnych rozmiarach.

Łączenie zapytań

Zapytania o multimedia można stosować do zapytań o układ strony i kontenery na potrzeby komponentów na stronie.

Ogólna struktura strony składa się z elementów main i aside. W obu elementach znajdują się obiekty multimedialne.

<body>
 
<main>
     
<div class="media"></div>
     
<div class="media"></div>
 
</main>
 
<aside>
     
<div class="media"></div>
 
</aside>
</body>

Zapytanie o multimedia stosuje układ siatki do elementów main i aside, gdy widoczny obszar jest szerszy niż 45em.

@media (min-width: 45em) {
  body
{
   
display: grid;
   
grid-template-columns: 3fr 1fr;
 
}
}

Reguła zapytania kontenera dla obiektów multimedialnych pozostaje taka sama: stosuj poziomy układ flexbox tylko wtedy, gdy element zawierający ten element jest szerszy niż 25em.

Układ z dwiema kolumnami – jeden szeroki, a drugi wąski. 
Obiekty multimedialne są ułożone w różny sposób w zależności od tego, czy znajdują się w szerokiej czy wąskiej kolumnie.

Zapytania dotyczące kontenerów to rewolucyjne rozwiązanie w przypadku mikroukładów. Komponenty mogą być autonomiczne i niezależne od widocznego obszaru przeglądarki.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o mikroukładach.

Zarówno siatka, jak i flexbox są przydatne w przypadku mikroukładów?

Fałsz
Prawda

Omówiliśmy wcześniej układ makr na poziomie strony. Teraz wiesz już o tym, mikroukłady na poziomie komponentu.

Następnie dogłębnie przeanalizujesz elementy składowe treści i dowiesz się, jak tworzyć elastyczne obrazy. Najpierw przedstawimy elastycznej typografii.