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.

Uwaga: tworzenie komponentów, które dostosowują się do kontenera, może być łatwiejsze dzięki zapytania dotyczące kontenerów.

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;
}

. 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 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.

Łą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.

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?

Prawda

🎉 Dobrze!

Fałsz

Źle. Układy siatki i Flexbox są bardzo przydatne, nawet dla najmniejszych układów.

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.